Different gutter half for each breakpoints

[Cedric-ruiu]

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]

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]

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;
  }
}