Foundation 5 and Page Printing

Blank pages when printing using print media query

The solution was to move the ".hide-for-print" class up to the parent divs.
Thanks to Tim at the Zurb support forum: http://foundation.zurb.com/forum/posts/26135-blank-pages-when-printing-using-print-media-query

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

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.

Zurb Foundation Print Styles - How to disable urls appearing next to anchors when printing?

That is caused by pseudo elements being added to attribute selectors; probably something like this:

a[href*="/"]:after, a[href*="/"]:visited:after {content: "("attr(href)")";}

You can most likely override this by resetting the content of the pseudo element.

Try adding the following to a print stylesheet:

a[href*="/"]:after, a[href*="/"]:visited:after {content: normal;}

Zurb Foundation 4 How to maintain columns when printing

I added this to my .scss file at the end:

@media print {
  div.columns {
    float:left!important;
    padding-left:0.9375em!important;
    padding-right:0.9375em!important;
    width:8.3333333333%!important;
  }
}

Zurb Foundation website - blank when printing

• If you're using foundation.min.css you should use foundation.css
• And remove the @media print and all its contents in the
  foundation.css file

This should fix it partially.

If it still doesnt work I suggest to make a screenshot and paste it in word and print that screenshot.

Center columns using Foundation 5

2 Things -

Not sure it's 100% needed, but I always wrap by columns in a row div, so inside of your centered column, contain the 3 child columns in a row div.

Also, you are only using 13 of the available 15 columns inside the centered column, maybe change the child columns to medium-7 instead of medium-6?

EDIT -

<div class="row">
  <div class="medium-13 medium-centered columns">
<div class="row">
    <div class="medium-7 columns">
      <h3>Center this part</h3>

      <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>
      </p>
    </div>
    <div class="medium-1 columns"></div>
    <div class="medium-7 columns end">
      <h3>And this in one row</h3>
      test test test test test test test test test test</div>
</div>
  </div>
</div>

---

Related Topics