테스트 사이트 - 개발 중인 베타 버전입니다

layout.css 문의드려요. 도와주세욥! 채택완료

SKYjk 3년 전 조회 1,715

http://mowoolim.com/?device=mobile

메뉴에 position: fixed; 로 설정했더니, 

첫번째 비쥬얼이 메뉴에 가려져서 짤려보입니다 ㅠ 

아무리 해봐도 잘 되네요;; 어디를 만져야하는지 모르겠습니다;; 

30분동안 해봤는데 못찾았네요. 

고수님들 알려주세요~~

 

 

 

@charset "utf-8";

#wrapper {position:relative;overflow:hidden;width:100%;}

/* 전체 메뉴 버튼 */  .btn-allmenu {float:right; position:relative; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none} .btn-allmenu span {position:absolute; left:50%; display:block; width:30px; height:3px; margin-left:-15px; background:#fff; transition:all .25s ease-in} .btn-allmenu span.line1 {top:10px} .btn-allmenu span.line2 {top:18px} .btn-allmenu span.line3 {top:26px} /* 전체 메뉴 버튼 */

/* 전체 메뉴 */ #m_menu_toggle {display: block;position: absolute;top: 5px;right: 10px;cursor: pointer;z-index: 25;} .mobile_menu {position: absolute;top: 0px;right: -80%;width: 80%;height: 100%;background:#000;} .mobile_right_menu {} .moblie_right_menu_body {position: relative;top: 0;left: 0;} .m_menu {margin-top:81px;} .m_menu>li {line-height:36px;border-top:solid 1px #222;} .m_menu li>a {color: #fff;font-size:14px;text-decoration: none;display:block;margin-left:30px;} .m_menu li a.active {font-weight: bold;line-height:36px;} #m_close {position: absolute;top: 35px;right: 20px;cursor: pointer;} ul.menu2 {display: none;margin-top: 6px;margin-bottom:-20px;} ul.menu2 li {padding: 6px 0;} ul.menu2 li a {color: rgba(255, 255, 255, 0.7);font-size: 13px;} ul.menu2 li a:hover {color:#;font-weight: normal;} ul.m_menu2 {display: none;margin: 6px 0 0px 0px;} ul.m_menu2 li {padding: 0px 0;background:#2e2e2e;} ul.m_menu2 li a {color:#999;font-size:13px;display:block;line-height:36px;} ul.m_menu2 li a:hover {color:#fff;font-weight: normal;}  /* 전체 메뉴 */

/* 상단 레이아웃 */ #hd {width:100%;z-index: 20 !important;position: absolute; min-width: 100%;} .hd_zindex {z-index:10 !important} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {position:relative;margin:0 auto;padding:26px 0;width:970px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #logo {float:left;padding-top: 10px;padding-left: 10px;} #main_hd_wrapper {position: fixed;margin: 0px auto;width: 100%;zoom: 1;background:#1c1c1c;padding-bottom:10px;border-top:solid 1px #292828;} #main_hd_wrapper:after {display: block;visibility: hidden;clear: both;content: "";} #hd_lang {position:relative;z-index:20;width:100%;min-width:100%;min-height:30px;background:#000;} #hd_lang .hd_lang_wrapper {width: 100%;margin: 0 auto;} #hd_lang .hd_lang_txt {text-align: right;color: #fefefe;padding-top: 9px;padding-right:15px;font-size:10px;letter-spacing:1px;} #hd_lang .hd_lang_txt a {color: #fefefe;margin-left:10px;} /* 상단 레이아웃 */

/* 모바일메뉴 */ .mobile_menu {  -webkit-transition: -webkit-transform 600ms ease;  -moz-transition: -moz-transform 600ms ease;  -o-transition: -o-transform 600ms ease;  transition: transform 600ms ease;  -webkit-font-smoothing: subpixel-antialiased; } .mobile_right_menu_open {  transform: translate3d(-100%, 0, 0);  -webkit-transform: translate3d(-100%, 0, 0);  -moz-transform: translate3d(-100%, 0, 0);  -ms-transform: translate3d(-100%, 0, 0);  -o-transform: translate3d(-100%, 0, 0); } .moblie_right_menu_body {  -webkit-transition: -webkit-transform 600ms ease;  -moz-transition: -moz-transform 600ms ease;  -o-transition: -o-transform 600ms ease;  transition: transform 600ms ease;  -webkit-font-smoothing: subpixel-antialiased; } .moblie_right_menu_toright {  transform: translate3d(-80%, 0, 0);  -webkit-transform: translate3d(-80%, 0, 0);  -moz-transform: translate3d(-80%, 0, 0);  -ms-transform: translate3d(-80%, 0, 0);  -o-transform: translate3d(-80%, 0, 0); } /* 모바일메뉴 */

/* 모바일추가메뉴 */

.mobile_fix {top:80px;position:fixed;z-index:90;background:#fff;width:100%;} .mobile_fix ul {font-size:0px;} .mobile_fix .depth1 > li {display:inline-block;font-size:12px;width:25%;text-align:center;border-right:solid 1px #f1f1f1;border-bottom:solid 1px #f1f1f1;height:35px;padding-top:10px;} .mobile_fix .depth1 > li a {display:block;} .mobile_fix .depth1 > li:nth-child(4) {border-right:0px;} .mobile_fix .depth1 > li:nth-child(8) {border-right:0px;} .mobile_fix .depth1 > li > .depth2 {display:none; position:absolute; top:35px; left:50%; width:100vw; background-color:#f7f7f7; transform:translateX(-50%); text-align:left;} .mobile_fix .depth1 > li.active > .depth2 {display:block;} .mobile_fix .depth1 > li > .depth2 > li {display:inline-block; width:25%;text-align:center;border-right:solid 1px #f1f1f1;border-bottom:solid 1px #f1f1f1;height:35px;padding-top:10px; text-align:center;} .mobile_fix .depth1 > li:nth-child(3) > .depth2 > li:nth-child(3){width:50%;} .mobile_fix .depth1 > li > .depth2 > li a{color:#666; font-size:11px;} .mobile_fix.fix0 .depth1 > li:nth-child(5), .mobile_fix.fix0 .depth1 > li:nth-child(6), .mobile_fix.fix0 .depth1 > li:nth-child(7), .mobile_fix.fix0 .depth1 > li:nth-child(8){margin-top:70px;} .mobile_fix.fix1 .depth1 > li:nth-child(5), .mobile_fix.fix1 .depth1 > li:nth-child(6), .mobile_fix.fix1 .depth1 > li:nth-child(7), .mobile_fix.fix1 .depth1 > li:nth-child(8){margin-top:70px;} .mobile_fix.fix2 .depth1 > li:nth-child(5), .mobile_fix.fix2 .depth1 > li:nth-child(6), .mobile_fix.fix2 .depth1 > li:nth-child(7), .mobile_fix.fix2 .depth1 > li:nth-child(8){margin-top:35px;} .mobile_fix.fix3 .depth1 > li:nth-child(5), .mobile_fix.fix3 .depth1 > li:nth-child(6), .mobile_fix.fix3 .depth1 > li:nth-child(7), .mobile_fix.fix3 .depth1 > li:nth-child(8){margin-top:35px;} .mobile_fix.fix4 .depth1 > li > .depth2, .mobile_fix.fix5 .depth1 > li > .depth2, .mobile_fix.fix6 .depth1 > li > .depth2, .mobile_fix.fix7 .depth1 > li > .depth2{top:70px;}

#container .inner {padding:0px 20px;}  

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

css 에보면

.main_visual_product_container 라고 클래스가 있어요

여기서 margin-top:150px; 을 넣어보세요 그럼 가려지지 않을거에요 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

S
SKYjk
3년 전
감사합니다. 메인은 정상적으로 나오는데요. 이번엔 페이지가 짤려보입니다. ;
main_visual_product_container 는 아닌거같고 상세페이지 margin-top:150px; 는 어디로 넣어야 하나요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인