everyday 테마를 사용 중인데 메인 배너에 오류가 생겨요ㅠㅠ
본문
아직 너무 부족하고 알음 알음 배우고 있는 단계입니다.
어쩌다 보니 업무를 맡아 홈페이지를 만들고 있는데 사진 속 현상 때문에 너무 힘듭니다ㅠㅠ
everyday 테마를 사용 중인데 수정하는 중에 문제가 생긴건지 뭔지 모르겠지만
메인 배너가 저렇게 이탈해서 아래로 쭉 이어집니다. 열심히 검색하고 하고 수정도 하고
다른 곳에서 확인했는데 다른 홈페이지에도 똑같은 문제가 발생하는 걸 봐서는
소스에 문제가 있는 것 같아요ㅠㅠ어디서 발생하는 문제인지 감도 못 잡겠어서 도움 부탁드립니다ㅠㅠ
답변 1
해당 페이지 주소를 알려주세요...
배너 jqeury 나 css 부분이 누락되어 모두 출력되는듯 합니다.
http://miroa.kr/ 홈페이지 주소는 여기입니다ㅠㅠ
제가 급해서 자세하게 언급하지 않았는데 항상 저렇게 뜨는 건 아니고 처음 들어가거나 가끔 새로고침하면 저렇게 뜹니다ㅠㅠ평소에는 또 괜찮아요ㅠㅠ
<div class="owl-stage" 이부분 스타일 width를 12000px 로 변경해 보시기 바랍니다.
개발자 옵션에서 적용 해보니 잘되네요
말씀해주신 방법으로 수정을 했으나 그래도 계속 슬라이드 배너가 아래 쪽으로 흘러내려 늘어집니다ㅠㅠ 제가 제대로 못한 건지 뭔지 모르겠네요ㅠㅠ새로고침하면 괜찮아지기는 하는데 왜 그러는걸까요?ㅠㅠ
어디를 수정하신건가요?
디버그 보니 수정이 않되어 있는것 같은데요?
말씀해주신 태그 확인하고 찾아봤는데, 제가 잘못이해한 것 같네요. 죄송하지만 조금 자세하게 설명 가능하실까요? 말씀하신 부분을 잘 모르겠습니다ㅠㅠ
해당 배너 부분 소스를 올려보시겠어요?
크롬에서 F12 누르셔서 엘리먼트 탭 부분에 해당영역을 확인해 보시면 됩니다.
[코드]<div class="owl-stage-outer"><div class="owl-stage" style="transition: all 0.25s ease 0s; width: 12000px; transform: translate3d(-7137px, 0px, 0px);"><div class="owl-item cloned" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=2&url=http%3A%2F%2Fminishop.gmarket.co.kr%2Fmis" target="_blank"><img src="http://miroa.kr/data/banner/2" width="1200" alt="" class="sbn_border" title=""></a>
</div></div><div class="owl-item cloned" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=4&url=http%3A%2F%2Fmiroa.kr%2Fshop%2Flist.php%3Fca_id%3D10"><img src="http://miroa.kr/data/banner/4" width="1200" alt="" title=""></a>
</div></div><div class="owl-item cloned" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=3&url=http%3A%2F%2Fmiroa.kr%2Fbbs%2Fcontent.php%3Fco_id%3Dwhymir"><img src="http://miroa.kr/data/banner/3" width="1200" alt=""></a>
</div></div><div class="owl-item" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=1&url=http%3A%2F%2Fmiroa.kr%2Fshop%2Flist.php%3Fca_id%3D50"><img src="http://miroa.kr/data/banner/1" width="1200" alt="" class="sbn_border" title=""></a>
</div></div><div class="owl-item" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=2&url=http%3A%2F%2Fminishop.gmarket.co.kr%2Fmis" target="_blank"><img src="http://miroa.kr/data/banner/2" width="1200" alt="" class="sbn_border" title=""></a>
</div></div><div class="owl-item" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=4&url=http%3A%2F%2Fmiroa.kr%2Fshop%2Flist.php%3Fca_id%3D10"><img src="http://miroa.kr/data/banner/4" width="1200" alt="" title=""></a>
</div></div><div class="owl-item active center" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=3&url=http%3A%2F%2Fmiroa.kr%2Fbbs%2Fcontent.php%3Fco_id%3Dwhymir"><img src="http://miroa.kr/data/banner/3" width="1200" alt="" title=""></a>
</div></div><div class="owl-item cloned active" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=1&url=http%3A%2F%2Fmiroa.kr%2Fshop%2Flist.php%3Fca_id%3D50"><img src="http://miroa.kr/data/banner/1" width="1200" alt="" class="sbn_border" title=""></a>
</div></div><div class="owl-item cloned" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=2&url=http%3A%2F%2Fminishop.gmarket.co.kr%2Fmis" target="_blank"><img src="http://miroa.kr/data/banner/2" width="1200" alt="" class="sbn_border" title=""></a>
</div></div><div class="owl-item cloned" style="width: auto;"><div>
<a href="http://miroa.kr/shop/bannerhit.php?bn_id=4&url=http%3A%2F%2Fmiroa.kr%2Fshop%2Flist.php%3Fca_id%3D10"><img src="http://miroa.kr/data/banner/4" width="1200" alt="" title=""></a>
</div></div></div></div><div class="owl-nav"><div class="owl-prev">prev</div><div class="owl-next">next</div></div><div class="owl-dots"><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot active"><span></span></div></div></div>
[/코드]
일단 제가 확인한 부분을 가져왔습니다. 아는 게 적어 무리하게 부탁드려 죄송합니다ㅠㅠ
제가 찍어보니
<div class="owl-stage" style="transition: all 0.25s ease 0s; width: 3200px; transform: translate3d(-928px, 0px, 0px);">
이렇게 보이는데요
css 에
.owl-carousel .owl-stage {
min-width:12000px
이렇게 해보시겠어요?