0

I'm using susy to create a very basic blog layout, its 3 columns wide for large medium screens, 2 columns for small (tablet) and then 1 column for mobile. The mobile and tablet layout works fine but medium and large screens are not flowing properly, the first column in the first row and third row are not floating properly as you can see here

Below is my scss:

.col-post {
    margin-bottom: gutter();
    background: #f5f5f5;

    @include breakpoint(xs) {
        @include span(12 of 12);
    }

    @include breakpoint(sm) {
        @include span(6 of 12 first);
        &:nth-child(2n) {
        @include last;
    }
    }

    @include breakpoint(md) {
        @include span(4 of 12 first);
        &:nth-child(3n) {
        @include last;
    }
}

    @include breakpoint(lg) {
        @include span(4 of 12 first);
        &:nth-child(3n) {
        @include last;
    }
  }

}

and my susy map at the top of my scss stylesheet is: 

@import "susy";

    $susy: (
      columns: 12,
      container: 1200px,
      gutters: 1/4,
      grid-padding: 1em,
      global-box-sizing: border-box,
      debug: (image: show)
    );
Duggy G
  • 465
  • 3
  • 12
  • 27

1 Answers1

0

This depends on how you defined your breakpoints. If they are defined using min-width only, then everything described in your sm media-query, will also apply to your lg media. You don't want your :nth-child declarations to bleed between media-queries like that. You have a few options.

  • I recommend narrowing the scope of your breakpoints by adding a max-width value to all but the largest. That way you can define layouts for a specific range of screens without worrying about bleed.
  • The other option is to override your previous nth-child settings at each new breakpoint. That can be difficult to maintain, which is why I prefer the first option.
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Yes I'am using min-width for my breakpoints, this is what I'm using: if $class == xs { media (max-width: 767px) { @content; } } else if $class == sm { media (min-width: 768px) { @content; } } else if $class == md { media (min-width: 992px) { @content; } } else if $class == lg { media (min-width: 1200px) { @content; } } If I change the min-width to max-width then tablet doesn't look right, you can see the basic grid I have [link](http://webcontrolcentre.co.uk/wordpress_sass/test/) – Duggy G Apr 05 '16 at 09:10
  • You don't want to change `min-width` to `max-width`, you want to use both for everything in the middle. So, for example, `if $class == md { media (min-width: 992px) and (max-width: 1199px) { @content; } }`. That gives a lower and upper limit to your styles, so they don't bleed over into the next breakpoint. – Miriam Suzanne Apr 05 '16 at 15:53
  • Thankyou, adding a min & max width fixed my issue. – Duggy G Apr 06 '16 at 13:59