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)
);
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.
max-width
value to all but the largest. That way you can define layouts for a specific range of screens without worrying about bleed.nth-child
settings at each new breakpoint. That can be difficult to maintain, which is why I prefer the first option.