-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
반응형으로 고쳐보고 싶은데요..
20.07.23 01:28 작성 조회수 119
0
반응형으로 고치려면 어떻게 해야하는지 알 수 있을까요 ㅠㅠ?
답변을 작성해보세요.
1
1분코딩
지식공유자2020.07.23
CSS에 아래 코드를 이어서 붙여넣어 보세요^^
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
.page-header {
grid-column: 1;
}
.page-footer {
grid-column: 1;
}
#radio-sort-category:checked ~ .cate-music {
grid-row: auto;
order: 1;
}
#radio-sort-category:checked ~ .cate-food {
grid-row: auto;
order: 2;
}
#radio-sort-category:checked ~ .cate-game {
grid-row: auto;
order: 3;
}
#radio-sort-category:checked ~ .cate-tech {
grid-row: auto;
order: 4;
}
}
600픽셀 이하에서는
grid-template-columns 등을 조정해서 1컬럼 레이아웃으로 바꾸고,
grid-row를 이용했던 카테고리별 정렬은 grid-row는 auto로 초기화 해주고
대신 order를 이용해서 배치 순서를 조정해 주었습니다.
답변 1