search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Different gutter half for each breakpoints #68

Open Cedric-ruiu opened 9 years ago

Cedric-ruiu commented 9 years ago

Hi,

If we need a gutter-half 20px on desktop/tablet and 10px on mobile breakpoint, how can we do this? I thought several times but I did not find "clean" solution...

Cédric R.

Cedric-ruiu commented 9 years ago

Maybe a solution : create 3 new classes : mobile-gutter-half, tablet-gutter-half and desktop-gutter-half

The problem is that interpolation variable is needed to implement this solution (like $#{$scope}gutter-half), but it's not available in sass :(

Aybee commented 8 years ago

Did you try to put different paddings inside the media queries?

*[class^='grid-'] {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 767px) {
  *[class^='mobile-grid-'] {
    padding-left: 10px;
    padding-right: 10px;
  }
}