You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.2 KiB
SCSS
67 lines
2.2 KiB
SCSS
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 0 1.24rem;
|
|
box-sizing: border-box;
|
|
overflow:auto; }
|
|
|
|
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve {
|
|
width: 100%;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding: .44rem;
|
|
margin: .6rem 0;
|
|
}
|
|
.grid-visible{
|
|
background: #EEE;
|
|
text-align: center;
|
|
border-radius: .44rem;
|
|
}
|
|
|
|
/* For devices larger than 360px */
|
|
@media (min-width: 360px) {
|
|
.container {
|
|
// width: 85%;
|
|
// padding: 0;
|
|
}
|
|
}
|
|
|
|
/* For devices larger than 550px */
|
|
@media (min-width: 550px) {
|
|
.container { width: 90%; }
|
|
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve{margin-left: 4%; }
|
|
.one:first-child,
|
|
.two:first-child,.three:first-child,.four:first-child,
|
|
.five:first-child,.six:first-child,.seven:first-child,
|
|
.eight:first-child,.nine:first-child,.ten:first-child,
|
|
.eleven:first-child,.twelve:first-child{margin-left: 0; }
|
|
|
|
.one { width: 4.66666666667%; }
|
|
.two { width: 13.3333333333%; }
|
|
.three { width: 22%; }
|
|
.four { width: 30.6666666667%; }
|
|
.five { width: 39.3333333333%; }
|
|
.six { width: 48%; }
|
|
.seven { width: 56.6666666667%; }
|
|
.eight { width: 65.3333333333%; }
|
|
.nine { width: 74.0%; }
|
|
.ten { width: 82.6666666667%; }
|
|
.eleven { width: 91.3333333333%; }
|
|
.twelve { width: 100%; margin-left: 0; }
|
|
|
|
/* Offsets */
|
|
.offset-one { margin-left: 8.66666666667%; }
|
|
.offset-two { margin-left: 17.3333333333%; }
|
|
.offset-three { margin-left: 30%; }
|
|
.offset-four { margin-left: 34.6666666667%; }
|
|
.offset-five { margin-left: 43.3333333333%; }
|
|
.offset-six { margin-left: 52%; }
|
|
.offset-seven { margin-left: 60.6666666667%; }
|
|
.offset-eight { margin-left: 69.3333333333%; }
|
|
.offset-nine { margin-left: 78.0%; }
|
|
.offset-ten { margin-left: 86.6666666667%; }
|
|
.offset-eleven,.offset-eleven:first-child { margin-left: 95.3333333333%; }
|
|
}
|