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