Cyclohexane (Talk | contribs) (Created page with " .js_simple{ display: none; } .examplecode { margin: 0 auto 30px; } .examplecode:last-child { margin-bottom: 0; } section { padding: 5vw 0; } section:nth-chil...") |
Cyclohexane (Talk | contribs) |
||
Line 39: | Line 39: | ||
display: inline-block; | display: inline-block; | ||
font-family: 'Source Sans Pro', sans-serif; | font-family: 'Source Sans Pro', sans-serif; | ||
− | height: | + | height: 210px; |
text-align: center; | text-align: center; | ||
font-size: 15px; | font-size: 15px; | ||
Line 89: | Line 89: | ||
margin-right: 10px; | margin-right: 10px; | ||
} | } | ||
+ | } | ||
@media screen and (min-width: 90rem ) { | @media screen and (min-width: 90rem ) { | ||
.slider { | .slider { | ||
Line 100: | Line 101: | ||
width: 280px; | width: 280px; | ||
margin-right: 10px; | margin-right: 10px; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 45rem ) { | ||
+ | .variablewidth li{ | ||
+ | width: 135px; | ||
+ | } | ||
+ | .frame li{ | ||
+ | height: 100px; | ||
} | } | ||
} | } |
Latest revision as of 18:01, 17 October 2018
.js_simple{
display: none;
} .examplecode {
margin: 0 auto 30px;
} .examplecode:last-child {
margin-bottom: 0;
}
section {
padding: 5vw 0;
} section:nth-child(even) {
background: #ececec;
} .slider {
position: relative; width: 320px; margin: 0 auto 40px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none;
} .frame {
position: relative; width: 270px; margin: 0 auto; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap;
} .frame li {
position: relative; display: inline-block; font-family: 'Source Sans Pro', sans-serif; height: 210px; text-align: center; font-size: 15px; line-height: 30px; background: #fff; color: #fff;
} .slides {
display: inline-block;
} .variablewidth li {
width: 280px; margin-right: 10px;
}
.variablewidth li:last-child{
margin-right: 0;
} .prev, .next {
position: absolute; top: 50%; margin-top: -25px; display: block; cursor: pointer;
} .next {
right: 0;
} .prev {
left: 0;
} .next svg, .prev svg {
width: 25px;
} @media screen and (min-width: 45rem ) {
.frame { width: 580px; } .next svg, .prev svg { width: 2vw; } .slider { width: 70vw; margin: 0 auto 20px; min-width: 640px; } .variablewidth li { width: 280px; margin-right: 10px; }
} @media screen and (min-width: 90rem ) {
.slider { width: 980px; margin: 0 auto 20px; } .frame { width: 880px; } .variablewidth li { width: 280px; margin-right: 10px; }
} @media screen and (max-width: 45rem ) {
.variablewidth li{ width: 135px; } .frame li{ height: 100px; }
}