0

In Foundation 6 is there a way to change the gutter size in the small breakpoint to something different than the gutter size in settings.scss? Right now I have $grid-column-gutter set to 90px but I'd like for that size to go to 30px when the site is in the small breakpoint. What's the best way to do that?

Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
Dustin
  • 4,314
  • 12
  • 53
  • 91

1 Answers1

0

I haven't gotten a chance to work very extensively in 6 yet. But I believe you're looking for some mixin combinations since Foundation 6 puts quite a bit more emphasis on taking classes out of the html and making your CSS files more structured. See below for an example that might help you.

.columns {
  // Only affects medium screens and larger
  @include breakpoint(medium up) {
     @include grid-column($columns, 90px);
  }

  // Only affects small screens, not medium or large
  @include breakpoint(small only) {
     @include grid-column($columns, $gutter);
  }
}

Not sure if you'll need to use different classes or not. But I think this should be a decent start. Got code snippets from "Grid" and "Media Queries" sections of the Foundation 6 documentation.

Waterpile
  • 121
  • 1
  • 3