1

Here's the code on Sassmeister, please let me know if there are any problems with the link: http://sassmeister.com/gist/0b7c3a1897fe3bbe33db

I have a $tablet and $bigscreen breakpoint, they use min-width values.

There's a media query for $tablet screens with omega(2n) value. Then I have another breakpoint for $bigscreen with a omega(4n) value. My goal is to have three pictures show per row on $bigscreen, two pictures show on $tablet, and one on smaller screens.

If you inspect the code, you can see the 2n tablet value still stands on the $bigscreen, causing all of the blocks not to fit and bump to the next row. Shouldn't this be overridden by the new breakpoint?

Relatively new to Neat, if you have any suggestions or helpful hints, they would be greatly appreciated! Thanks!

1 Answers1

0

You have a problem with the omega, the omega(4n) of the $bigscreen breackpoint don't overwrite the omega(2n) of the tablet breackpoint.

For a solution you can check Omega Reset. Include the mixin in your sass and do something like this:

.picture
    +media($tablet)
        +span-columns(6) //6 of 12
        +omega(2n)
    +media($bigscreen)
        +span-columns(4) //4 of 12
        +omega(3n)
        +omega-reset(2n)

The omega-reset(2n) in the $bigscreen media query reset the omega(2n) of the $tablet breackpoint. I had the same problem recently and this solution worked very well.

Ariel Gerstein
  • 176
  • 1
  • 4