테마 jelly 배너 질문

테마 jelly 배너 질문

QA

테마 jelly 배너 질문

본문

배너 모바일에서도 반응형으로 사이즈 맞추고 싶은데 어떻게 해야되나요?

 


/*메인배너*/
#main_bn{width:100%;z-index:1;position:relative}
#main_bn ul li {height:600px;-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;}
#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;
background-size:cover; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; }
 
#main_bn .active{opacity:1}
#main_bn .bn-txt-wr{display:table;height:100%;width:100%;margin:0 auto;max-width:1200px;position:relative;z-index:20;text-align:left}
#main_bn .bn-txt{display:table-cell;vertical-align:middle;padding:0 50% 0 20px;font-size:4em;font-weight:bold;word-break: keep-all;color:#fff;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-text-shadow: 0 1px 2px rgba(0,0,0,0.2);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);}
#main_bn .btn_detail{text-indent:-999px;font-size:0;;overflow:hidden;text-align:center;background:url(img/btn_detail.png) 50% 50%  no-repeat;width:118px;height:44px;margin-top:40px;display:block;border-radius:30px; opacity:0.9;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
#main_bn .btn_detail:hover{ ; opacity:1;
-webkit-box-shadow: 0 6px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.2);
box-shadow: 0 6px 10px rgba(0,0,0,0.2);}
 
#main_bn .bx-controls{position:absolute;bottom:30px;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:99}
#main_bn .bx-pager-item{display:inline-block;padding:0 8px}
#main_bn .bx-pager-link {display:block;background:#fff;opacity:0.5;border-radius:5px;width:6px;height:6px;text-indent:-999px;overflow:hidden}
#main_bn .active {opacity:1;
-webkit-box-shadow: 0 0  8px 5px rgba(255,255,255,0.6);
-moz-box-shadow:  0 0  8px 5px rgba(255,255,255,0.6) ;
box-shadow: 0 0  8px 5px rgba(255,255,255,0.6);}
#main_bn .bx-prev{position:absolute;top:50%;left:0;margin-top:-20px;width:40px;height:40px;text-indent:-999pc;overflow:hidden;background:url('./img/btn_prev.png') no-repeat 50% 50%;opacity:0.7}
#main_bn .bx-next{position:absolute;top:50%;right:0;margin-top:-20px;width:40px;height:40px;text-indent:-999pc;overflow:hidden;background:url('./img/btn_next.png') no-repeat 50% 50%;opacity:0.7}
#main_bn .bx-next:hover,#main_bn .bx-prev:hover{opacity:1}

이 질문에 댓글 쓰기 :

답변 1

#main_bn이 메인배너 인것 같은데 100%가 주석이 되어있네요 100% 해주심 될것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 17,115
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT