CODEWITHSUNDEEP
gridsassbreakpointssusy-compass
pixeloco
pixeloco

Reputation: 275

how to overwrite Susy settings at certain breakpoints

I’m using Susy’s gallery setting at a small breakpoint and (because of mobile first CSS structure), its getting passed to the larger breakpoint and I can’t figure out how to clear/overwrite it to allow my divs to span full width.

tablet output:

[div] [div] [div]

desired desktop output:

[      div      ]
[      div      ]
[      div      ]

my attempt:

div {
  @include gallery(4);
  @media (min-width: 900px) {
    @include break;
    @include full;
  }
}

see FIDDLE

Upvotes: 0

Views: 165

Answers (1)

Matt Sims
Matt Sims

Reputation: 563

I'm sure you already resolved this by now, but since I came up against the same issue I thought I'd post my solution.

Add the following mixin:

@mixin reset-gallery {
  &:nth-child(1n) {
    margin-left: 0;
    margin-right: gutter();
  }

  &:last-child {
    margin-right: 0;
  }
}

and then reset your divs as follows:

@media (min-width: 900px) {
  @include reset-gallery;
  @include span(full);
}

Updated fiddle here. It might not work in all situations, but it worked for me and seems to work for your case also.

Upvotes: 2

Related Questions