상품 전시 카테고리 반응형으로 어떻게 할 수 있나요??
본문
안녕하세요, 완벽한 반응형은 아니더라도 pc 사이즈에서는 한 열에 4 개의 썸네일이 보였다면 아이패드에서는 세 개, 모바일에서는 두 개 이런식으로 설정하고싶습니다.
현재 상태는 이렇게 pc에서는 정상적으로 4개, 하지만 태블릿에서는 3개/1개 따로따로 정렬이 되더라구요.
이런 경우는 어떻게 수정할 수 있을까요??
미디어쿼리 사용해서 width를 수정해도 같은 결과가 나오더라규요
도와주세요!
<section class="sct_wrap">
<?php
$list = new item_list();
$list->set_category('40', 1);
$list->set_list_mod(4);
$list->set_list_row(6);
$list->set_img_size(200, 300);
$list->set_list_skin(G5_SHOP_SKIN_PATH.'/main.40.skin.php');
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', false);
$list->set_view('it_price', true);
$list->set_view('it_icon', false);
$list->set_view('sns', false);
echo $list->run();
?>
코드소스입니다.
태블릿에서 따로, 모바일에서 따로 설정해야하나요??
추가로 기기마다 이미지 사이즈를 바꿀 수 있나요??
질문이 많네요,, 미리 감사드립니다 :-)
답변 2
해당 css 를 봐야 알수 있습니다.
크롬 등 브라우저에서 F12 개발자모드 여셔서
해당 객체 찍어보시고 어디에서 컨트롤 하는지 찾아보세요.
/main.40.skin.php 또는 sct_wrap 클래스 채크 해보셔도 됩니다.
어딘가에 @media 제어 부분이 있을거에요.
.sct_wrap 중 li 를 찾아
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1050px) {
}
@media screen and (max-width: 767px) {
}
미디어 스크린을 통해 li width 를 %로 조절하시면 됩니다.
다만 좌우 패딩 마진등은 추가클래스를 통하여 컨트롤하시면되요~
추가로 기기별 이미지사이즈는 일반 웹에서는 굳이 하지않습니다.
미디어 스크린을 통해 작업합니다.
말씀하신대로 하면 이미지를 품고있는 li의 width는 변하는데 이미지 자체의 사이즈는 변하지 않습니다..ㅠㅠ그래서 이미가 겹쳐져서 보이더라구요...
.sct_wrap li a img 태그는 손보셨나요 ?
해당 이미지태그는 관리자 설정값을 그대로 들고와서
.sct_wrap li a, .sct_wrap li a img {position:relative; width:100%; height:auto;}
두개 잡아주셔야 해요. 그래야 li 의 width %준것에 맞추어서 들어가요
오오 알려주신 방법으로 이미지 사이즈 조절은 했습니다!! 너무 감사드려요. 그런데 반응형 이미지 정렬(4개->3개->2개)은 역시 안되더라구요.. 아무튼 정말 감사합니다 :)
해당 리스트 설정에서 4개를 해두셨다면 해당 클래스의 li의 width:25%가 될거구요
해상도에 해당하는 이미지를 맞추려면
@media screen and (max-width: 1050px) {
.클래스 li {width:33.33333333%; float:left; 등 기타 옵션은 맞추어서 등록}
}
@media screen and (max-width: 767px) {
.클래스 li {width:50%; float:left; 등 기타 옵션은 맞추어서 등록}
}
이런식으로 가야죠,, css로 강제로 찍어야 반응형이 됩니다.
