문의드립니다.
본문
안녕하세요.
쇼핑몰 사이트인데요. http://103.100.60.201
pc접속시 메인 이미지중간정렬 잘되고있는데요.
휴대폰으로 pc버전 변경시 이미지가 왼쪽으로 출력됩니다.
어떤부분으로 수정가능한지 아시는분있으시면 알려주시면 감사합니다.
답변 3
모바일로 변하는 순간 body 부분의 가로가 980px 로 변경됩니다.
body 부분이 980px로 고정이 되는데, 메뉴는 1350px로 제대로 고정이 되어 있어 문제가 없고 배너 부분은 또 body를 따라 980px로 고정이 되어 버립니다.
css에서만 찾지 마시고 javascript 부분 까지 보셔야 합니다.
제가 소스 하나하나 뒤져가면서 찾아드릴 수는 없는 노릇이구요.
개발자 모드 켜서 해당 부분 확인해 보시면 제 말이 이해 가실겁니다.
참고로 배너 부분만 따로 분리하면 정상적으로 보입니다.
소스 보니까 가로 1350px 고정이고
이미지는 980px로 고정이 되는거 같습니다.(아니면 div 의 크기가...)
모바일로 변할 때 이미지의 크기(div의 가로)가 변하는 부분을 찾아서 100%를 줘야 할거 같은데요.
<style>
.banner{ width:100%; height:660px; margin:0 auto; overflow:hidden; position:relative;font-size:0;}
.b-img{width:100%; height:660px; position:absolute; left:0; top:0;}
.b-img a{width:100%; display:block; height:660px; float:left;}
.b-list{ height:50px; padding-top:600px; position:relative; margin:0 auto;z-index:1;}
.b-list span{ display:block;cursor:pointer; width:14px; height:14px; border-radius:50%; border:3px solid #fff; float:left; margin:0 5px; _margin:0 3px;}
.b-list .spcss{border:3px solid #14ab04;}
.bar-left{ position:absolute; z-index:1; display:block; width:100px; height:100%; left:0px; background:none; top:0px; }
.bar-right{ position:absolute;z-index:1; display:block; width:100px; height:100%; right:0px; background:none; top:0px; }
.bar-left em{ display:block; width:50px; height:100px; background:url(<?=$g_skin_link?>/bannerjs/arrow.png) 0px 0px no-repeat; margin:0 auto; margin-top:300px;}
.bar-right em{ display:block; width:50px; height:100px; background:url(<?=$g_skin_link?>/bannerjs/arrow.png) -50px 0px no-repeat; margin:0 auto; margin-top:300px;}
.bar-left .emcss{ background-position:0px -100px;}
.bar-right .emcss{ background-position:-50px -100px;}
</style>
<script src="<?=$g_skin_link?>/bannerjs/jquery-1.8.3.min.js"></script>
<script src="<?=$g_skin_link?>/bannerjs/banner.js"></script>
<div class="banner">
<div class="b-img">
<a href="#" style="background:url(images/banner02.jpg) center 60px no-repeat;"></a>
<a href="#" style="background:url(images/banner03.jpg) center 60px no-repeat;"></a>
<a href="#" style="background:url(images/banner01.jpg) center 60px no-repeat;"></a>
<a href="#" style="background:url(images/banner04.jpg) center 60px no-repeat;"></a>
</div>
<div class="b-list"></div>
<a class="bar-left" href="#"><em></em></a>
<a class="bar-right" href="#"><em></em></a>
</div>
소스가 이렇게 되어있는데요
