안녕하세요.
모바일 화면에서 오류사항이 보여서 문의드립니다.
1. 메인 슬라이드 이미지가 모바일화면에서는 저렇게 짤리는데.. 높이사이즈 못 키우나요?
2. 모바일 화면에서 보니 메인배너 저 부분이 이미지가 짤리는 현상이 있네요
같은 사이즈의 이미지 임에도 불구하고
위쪽은 왼쪽 일부가 짤리고.. 아래쪽 이미지는 오른쪽 부분이 짤리게 보입니다.
3. 모바일로 메인화면을 보게 보면.. 계좌안내 부터 이미지 4개가 아래로 쭉 배열되는데요
이미지가 너무 큰거 같아서.... 모바일 화면에서는 아래 첨부화면처럼 이미지 4개를... 한줄에 2개씩해서 2줄로 정렬하고 싶습니다.
도움 부탁드립니다. ^^
친절하게 이해하기 쉽게 캡쳐까지 해주셨네요.
답변을 드리면
1. 모바일 슬라이드 높이 조절
관리자 메뉴로 가셔서 이미지 슬라이더에 슬라이더 상단 높이 설정이 있습니다.
로그인 > 관리 > 고급 > 설치된레이아웃 > 컬렉터 레이아웃 > 해당레이아웃의 설정 > 이미지 슬라이더 탭 > 슬라이더 상단 높이
※ 메인메뉴가 상단 고정형이고 사용자 분들이 사용하시는 로고가 각각 다를것이기 때문에 설정을 해주셔야 슬라이더가 잘리지 않습니다.
2. 배너 잘리지 않기
해당코드에 background-size:cover;를 지우시거나 width:100%;를 넣어주세요
<div class="col-md-4 col-sm-4">
<h4 style="font: 600 14px 'Nanum Gothic', 나눔고딕, 'NanumGothic',맑은고딕, 'Malgun Gothic', AppleGothic, Dotum, Sans-serif; color:#000; border-bottom:2px solid #000; padding-bottom:6px; margin-bottom:20px;">이벤트/홍보</h4>
<div class="coll_v_33 coll-box2" style="background-image:url(http://popmon.co.kr/web/product/medium/547_shop1_309465.jpg); background-size:cover;">
<a href="#" class="link-btn"><i class="fa fa-hashtag pull-right"></i></a>
<h6>NEW</h6>
<h4>철인28호</h4>
<p></p>
<a class="btn round-border no-border btn-sm btn-default">go</a>
</div>
<div class="coll_v_44 coll-box2" style="background:url(http://thumbnail.egloos.net/600x0/http://pds12.egloos.com/pds/200904/25/14/e0040614_49f2cdac2b2d8.jpg); background-size:cover; opacity:0.7;">
<a href="#" class="link-btn"><i class="fa fa-hashtag pull-right"></i></a>
<h6>HOTISSUE</h6>
<h4>GUNDAM</h4>
<p></p>
<a class="btn round-border no-border btn-sm btn-default">go</a>
</div>
</div>
예) style="background-image:url(경로.jpg); background-size:cover;"> -> 수정전
=> style="background-image:url(경로.jpg); width:100%;"> -> 수정후
3. 하단배너 모바일 2단 정렬
수정전 예)
<!-- 배너 시작 -->
<div class="banner">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner1.png" /></a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner2.png" /></a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner3.png" /></a></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner4.png" /></a></div>
</div>
</div>
<!-- 배너 종료 -->
수정후 예)
<!-- 배너 시작 -->
<div class="banner">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner1.png" /></a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner2.png" /></a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner3.png" /></a></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="col_b_banner"><a href=""><img class="img-responsive" src="http://luna270.cafe24.com/www/layouts/layout_collector/img/coll_banner4.png" /></a></div>
</div>
</div>
<!-- 배너 종료 -->
col-xs-12를 col-xs-6으로 수정합니다.