You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey Jamie -- I've needed a class that creates a responsive grid without column/row specifications. Consider adding the following class to closure. I've provided some sample breakpoints:
.griddle {
margin:0px;
width:100%;
padding:0px;
list-style-type:none;
> li {
float:left;
width:100%;
padding:0px;
margin:0px 0px 1rem 0px;
}
@media all and (min-width: 800px) and (max-width: 1279px) {
li {
width:50%;
&:nth-of-type(2n+1) {padding-right:1%; }
&:nth-of-type(2n+2) {padding-left:1%; }
}
}
@media all and (min-width: 1280px) and (max-width: 1599px) {
li {
width:33.33%;
&:nth-of-type(3n+1) {padding-right:1%; }
&:nth-of-type(3n+2) {padding:0 .5%; }
&:nth-of-type(3n+3) {padding-left:1%; }
}
}
@media all and (min-width: 1600px) {
li {
width:25%;
&:nth-of-type(4n+1) {padding-right:.75%; }
&:nth-of-type(4n+2) {padding:0 .75%; }
&:nth-of-type(4n+3) {padding:0 .75%; }
&:nth-of-type(4n+4) {padding-left:.75%; }
}
}
}
The text was updated successfully, but these errors were encountered:
Hey Jamie -- I've needed a class that creates a responsive grid without column/row specifications. Consider adding the following class to closure. I've provided some sample breakpoints:
The text was updated successfully, but these errors were encountered: