CODEWITHSUNDEEP
gridsasszurb-foundation
Steve Walker
Steve Walker

Reputation: 281

Foundation 5 grid with SASS not working - all columns full width

I am doing 2 responsive rebuilds on a site using Zurb Foundation with CSS and another with SASS . I am having trouble with the columns not displaying side-by-side in the SASS version, they seem to be going full width for every screen size.

For the SASS rebuild, I have copied all my files into the new directory structure that was created by the command line. I assumed it would be a case of porting my old files, plugging everything back together, watch the sass folder in the command line, output app.css and it would work. Everything has carried across fine except for the columns for some reason.

The CSS version is exactly how I would like the site to look - does anyone have any suggestions at all?

Thanks in advance for the help.

Upvotes: 1

Views: 630

Answers (2)

Adam Huffman
Adam Huffman

Reputation: 1041

Its hard to say exactly whats going on without looking at your SASS, but you do not have medium-4 defined in your app.css. You do have small-12 and large-4 classes defined. Once you get the medium-# classes defined your code should work fine.

agconti's answer does fix the issue, but remember "Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary". Once you get the medium-# classes defined you should be good to go. There shouldn't be a reason to add large-#, xlarge-#, or xxlarge-# as long as you want them to look like medium-#.

I hope that helps.

Upvotes: 2

agconti
agconti

Reputation: 18093

Your only specifying the small (iphone) and medium (tablet) views, but your viewing it from a large (desktop) view.

Add large-4 to your columns to make them work in the desktop view like so:

<div class="small-12 medium-4 large-4 columns">
                <h2>Creditlook Lite</h2>
                <div class="sprite icon1">&nbsp;</div> 
                <p>Free entry-level, self-managed service to get you started.</p>
</div>

Then your div's will respond like your photo.

Upvotes: 0

Related Questions