CODEWITHSUNDEEP
htmlcsszurb-foundation
Learning
Learning

Reputation: 20001

how to make zurb foundation print as they show in the browser

I want to print the page as it shows in the browser.

Most images break during printing when page has few images for example

http://jsfiddle.net/V7TuY/4/

http://fiddle.jshell.net/V7TuY/4/show/

In above example if you will try print preview you will see image will take who row rather than showing rather than showing as a single row.

How to fix this kind on issues

<div class="row">
    <div class="small-12 medium-2 medium-offset-1 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns end">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
</div>

Upvotes: 2

Views: 265

Answers (1)

Jordan Job
Jordan Job

Reputation: 71

A quick way to do this is to add overriding styles like these:

@media print {
  .large-1 {
    width: 8.33333%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-3 {
    width: 25%;
  }

  etc.....
}

The default Foundation grid is 12 columns wide, so 1/12 roughly equals 8.33333% and you can use that to calculate how wide each class should be.

Fiddle:

http://jsfiddle.net/jordan90/uNjLu/3/

The main reason I wanted to answer though is because I don't have enough reputation to comment, and I wanted to let you know how to work with SASS in .NET.

There's an extension for Visual Studio called SassyStudio that compiles CSS files from SASS for you every time you save a SASS file. I have tried numerous options and SassyStudio is the easiest way to get up and running with SASS in Visual Studio. If you combine that with a NuGet package like Foundation5.MVC.Sass that sets up all of the Foundation and SASS for you, it lets you start using Foundation with SASS in Visual Studio very quickly.

Upvotes: 3

Related Questions