Menu icon Foundation
Cross Browser Grid Errors

Hello!

I'm going through the zurb masterclass and found that the zurb grid system doesn't seem to work in anything but Chrome (and Opera, which is basically now chrome).

 

Kitty page on different browsers

 

After seeing this sample code from the engine, I ran some basic grid tests and I couldn't seem to write any grids that didn't break on edge and firefox.  Am I missing something?

When seen on firefox and edge, this very basic grid arrangement would fail. The 8 and 4 columns would wrap and the 6 and 6 columns would wrap rather than scaling properly.

---

<row>
  <columns class="grid--light" small="12" large="12">
    <p>12</p>
  </columns>
</row>
<row>
  <columns class="grid--dark" small="8" large="8">
    <p>8</p>
  </columns>
  <columns class="grid--light" small="4" large="4">
    <p>4</p>
  </columns>
</row>
<row>
  <columns class="grid--dark" small="6" large="6">
    <p>6</p>
  </columns>
  <columns class="grid--light" small="6" large="6">
    <p>6</p>
  </columns>
</row>

grid

Hello!

I'm going through the zurb masterclass and found that the zurb grid system doesn't seem to work in anything but Chrome (and Opera, which is basically now chrome).

 

Kitty page on different browsers

 

After seeing this sample code from the engine, I ran some basic grid tests and I couldn't seem to write any grids that didn't break on edge and firefox.  Am I missing something?

When seen on firefox and edge, this very basic grid arrangement would fail. The 8 and 4 columns would wrap and the 6 and 6 columns would wrap rather than scaling properly.

---

<row>
  <columns class="grid--light" small="12" large="12">
    <p>12</p>
  </columns>
</row>
<row>
  <columns class="grid--dark" small="8" large="8">
    <p>8</p>
  </columns>
  <columns class="grid--light" small="4" large="4">
    <p>4</p>
  </columns>
</row>
<row>
  <columns class="grid--dark" small="6" large="6">
    <p>6</p>
  </columns>
  <columns class="grid--light" small="6" large="6">
    <p>6</p>
  </columns>
</row>
Rafi Benkual over 2 years ago

Hi Israel,

That is very odd! The weird thing is that this sort of grid tests perfectly on all clients. Are you using a new version of Foundation fro Emails or the code from the class?

Israel Evans over 2 years ago

The screenshots above were using the unaltered code from the masterclass which I downloaded and plopped into a new project made by calling up 'foundation new' at the command line and creating an email project.

And I'm using the latest versions of all the various browsers. 

I thought it was strange too. 

So, this morning, I created a brand new project, loaded up newsletter-2.html in the pages directory of the samples provided by the creation of a new project and made 2 small changes: I added 'small="6"' to each of the columns in the 2 column section of that template.  

  <row>
    <columns small="6" large="6">
      <h4>Sub Section Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
    </columns>
    <columns small="6" large="6">
      <h4>Sub Section Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
    </columns>
  </row>

Here is a picture of how that worked out in four browsers: (Chrome and Opera for the win)

Newsletter-2 sample column wrap

Any ideas on what might be wrong?

 

Thanks,
~Israel

Israel Evans over 2 years ago

Oh, and yes. This is all new foundation, freshly installed within the last week or so using the instructions from the "getting started with SASS" guide: http://foundation.zurb.com/emails/docs/sass-guide.html

 

 

Corey Schaaf over 2 years ago

Israel Evans,

My guess is that code from the MasterClass may not be taking advantage of the the correct version of Foundation For Emails 2.2.1. I took the masterclass as well and I know there have been releases since I participated in Master Class. The course material may need to be updated to reflect the changes in the new versions.  

They usually stay on top of that pretty well.  I could be completely wrong and it could be something else. I started a new project and dropped some of my html in and everything seemed to be working fine for all those browsers.