@media screen and (max-width:1023px){
// 변수 재선언
.container {
$w : 33.333%;
article {
width: $w;
&:nth-child(1) {
width:$w*3;
height: 400px;
}
&:nth-child(2) {
width:$w*2;
}
&:nth-child(4),
&:nth-child(7),
&:nth-child(10),
&:nth-child(12) {
display: none;
}
&:nth-child(6) {
width:$w*2;
}
&:nth-child(8) {
width:$w;
}
&:nth-child(9) {
width:$w;
}
}
}
}
가로 3칸 설정을 위해 변수 $w을 33.33%로 변경 합니다.
제거하고 싶은 아티클을 display:none; 으로 감춰줍니다.
'반응형 웹사이트 > Shilla Hotel' 카테고리의 다른 글
width≤639px (0) | 2021.01.26 |
---|---|
639<width≤779px (0) | 2021.01.26 |
1280px < width ≤ 1599px (0) | 2021.01.26 |
line-awesome 이미지 animation으로 무한 회전 시키기 (0) | 2021.01.26 |
@media : 반응형 사이트 설정하기(1600px 이하) (0) | 2021.01.25 |
댓글