SIR

반응형 모바일 페이지 화면 줄어드는 현상 (style.css)

반응형 모바일 페이지 화면 줄어드는 현상 (style.css)

QA

반응형 모바일 페이지 화면 줄어드는 현상 (style.css)

본문

영카트5431 이윰테마 반응형입니다.

 

PC화면은 정상이고 모바일 메인화면 우측에 약간 공간이 발생 하고 특히 '회사소개'화면이 문제 입니다.

같은 내용관리 중 다른 내용관리 화면이나 이용약관, 개인정보 화면등은 멀쩡 합니다.

테마 콘텐츠관련 style.css나 head.php관련 style.css를 여러번 살폈지만 변화가 없습니다.

 

모바일로 http://yesok.biz/bbs/content.php?co_id=company 확인하시면 현상을 확인 할 수 있습니다.

 

도움을 요청 드립니다.

 

 

테마 content.skin.php 의 style.css 부분인데 이 부분으로는 해결이 안됩니다.


@charset "utf-8";
/* 내용관리 */
#ctt {width:100%;margin:5px 0;padding:5px;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:5px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}
@media (max-width:991px){
#ctt header h1 {position:absolute;width:100%;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
}
@media (max-width:767px){
#ctt header h1 {position:absolute;width:100%;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
}

 

head.php관련 style.css


/*---------- Header - 로고와 탑바 ----------*/
.header-top {position:relative;padding:15px 0;z-index:99}
.header-logo {float:left;margin:0}
.header-logo a {display:block;height:36px}
.header-logo span {font-size:28px;line-height:36px;color:#1b1b1b}
.header-logo img {max-height:28px;width:auto}
.top-bar {float:right}
.top-bar-list > li {float:left;margin-left:15px}
.top-bar-list > li > a {display:block;line-height:36px;color:#707070;font-size:12px}
.top-bar-icon {width:36px;height:36px;text-align:center;background:#AA8763;;border-radius:18px !important}
.top-bar-icon:hover {background:#474037}
.top-bar-icon i {line-height:36px;color:#fff}
@media (min-width:768px){
    .top-bar-list i {display:none}
    .top-bar-icon i {display:block}
}
@media (min-width:992px){
    .mobile-nav-trigger {display:none}
}
@media (max-width:767px){
    .top-bar-list > li {display:inline-flex;margin-left:5px}
    .top-bar-list > li > a {color:#fff}
    .top-bar-list li a i {display:block;line-height:36px;color:#fff;width:36px;height:36px;text-align:center;background:#AA8763;;border-radius:18px !important}
    .top-bar-list li a span {display:none}
}
/*---------- Header Nav - 메인메뉴 ----------*/
.header-nav .navbar-nav > li .dropdown-menu li a i {position:absolute;right:15px;top:15px}
/* 992px 이상 메뉴 - pc */
@media (min-width: 992px) {
    .header-nav {position:relative;background:#605951}
    .header-nav.header-fixed-trans {position:fixed;top:0;width:100%;z-index:9}
    .sidebar .sidebar-left-content h3 {display:none}
    .header-nav .navbar {margin-bottom:0}
    .header-nav .navbar-nav {float:left;width:100%;border-left:1px solid #82796d}
    .header-nav .navbar-nav > li {border-right:1px solid #82796d}
    .header-nav .navbar-nav > li > a {padding:0 20px;line-height:70px;color:#eee;font-size:18px;text-align:center}
    .header-nav .navbar-nav > li > a:hover, .header-nav .navbar-nav > li.open > a {background:#AA8763;color:#fff}
    .header-nav .navbar-nav > li.active > a {background:rgba(0,0,0,0.6);color:#fff;font-weight:bold}
    .header-nav .navbar-nav > li ul {padding:0;border:0;width:100%}
    .header-nav .navbar-nav > li ul li {position:relative;background:#474037}
    .header-nav .navbar-nav > li ul li a {color:#ddd;padding:15px;background:none;border-bottom:1px solid #645C52;font-size:13px}
    .header-nav .navbar-nav > li ul li a:hover, .header-nav .navbar-nav > li ul li.active > a {color:#fff;background:rgba(0,0,0,0.25)}
    .header-nav .navbar-nav > li ul li ul {top:-3px;left:100%;border-left:1px solid #1f1f1f}
    .nav > li > a:focus {background:none}
    .header-sticky-space.header-fixed-space-trans {margin-top:66px}
}
/* 992px 미만 메뉴 - 모바일 */
@media (max-width: 991px) {
    .sidebar.left {z-index:999;display:none;position:fixed;top:0;left:0;bottom:0;width:280px;background:rgba(204, 204, 204, 0.9)}
    .sidebar-left-mask {display:none}
    .sidebar-left-mask.active {display:block;position:fixed;top:0;bottom:0;left:0;right:0;z-index:998;background:#000;opacity:0.5}
    .sidebar .sidebar-left-content.active {position:relative;height:100%;width:100%;box-shadow:0 0 5px rgba(0,0,0,0.25);overflow-y:auto;-webkit-overflow-scrolling:touch}
    .header-nav .navbar {min-height:auto;margin-bottom:0}
    .header-nav .navbar-nav {position:relative;margin:0;float:none}
    .header-nav .navbar-nav > .nav-li-space {height:44px;border-bottom:none;border-top:1px solid #e5e5e5;background:#f2f2f2}
    .header-nav .navbar-nav > li {float:none;width:100% !important}
    .header-nav .navbar-nav > li > a {font-size:14px;padding:10px 15px;color:#555}
    .header-nav .navbar-nav > li a {border-bottom:1px solid #DADADA}
    .header-nav .navbar-nav > li > .cate-dropdown-open {position:absolute;top:1px;right:0;width:40px;height:40px;line-height:40px;margin:0;padding:0;text-align:center;border:0 none;border-left:1px solid #DADADA;z-index:9}
    .header-nav .navbar-nav > li > .cate-dropdown-open:before {content:"\f067";font-family:FontAwesome;color:#656565}
    .header-nav .navbar-nav > li > .cate-dropdown-open:hover {border-top:0}
    .header-nav .navbar-nav > li.open > .cate-dropdown-open:before {content:"\f068";font-family:FontAwesome;color:#000}
    .header-nav .navbar-nav .open .dropdown-menu {border:0;float:none;width:auto;margin:0;padding:0;position:static;box-shadow:none;background-color:transparent}
    .header-nav .navbar-nav .open .dropdown-menu > li > a {color:#555;line-height:26px}
    .header-nav .navbar-nav .open .dropdown-menu > li:first-child > a {border-top:0 none}
    .header-nav .navbar-nav .open .dropdown-menu > li > a, .header-nav .navbar-nav .open .dropdown-menu .dropdown-header {padding:5px 15px 5px 25px}
    .header-nav .navbar-nav .open .dropdown-menu > li > a:hover, .header-nav .navbar-nav .open .dropdown-menu > li > a:focus {color:#000}
    .header-nav .navbar-nav > .open > a, .header-nav .navbar-nav > .open > a:hover, .header-nav .navbar-nav > .open > a:focus {color:#000;background:inherit}
    .header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {color:#000;background:inherit}
    .header-nav .navbar-nav .dropdown .dropdown-submenu > a {font-size:12px}
    .header-nav .navbar-nav .open .dropdown-menu .dropdown-menu > li > a {color:#555;line-height:22px;border-top:0 none;padding:5px 15px 5px 30px}
    .header-nav .navbar-nav .dropdown-submenu > .dropdown-menu {display:block}
    .nav>li>a:hover, .nav>li>a:focus {background:none}
    .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {border-color:#dadada}
}
.sidebar .sidebar-member-menu {display:none}
@media (max-width: 991px) {
    .sidebar.left {z-index:999;display:none;position:fixed;top:0;left:0;bottom:0;width:280px;background:#eee}
    .sidebar-left-mask {display:none}
    .sidebar-left-mask.active {display:block;position:fixed;top:0;bottom:0;left:0;right:0;z-index:998;background:#000;opacity:0.5}
    .sidebar .sidebar-left-content.active {position:relative;height:100%;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .sidebar .sidebar-left-content h3 {margin:0;padding:0 15px;line-height:66px;background:#605951;color:#fff;font-size:20px}
    .sidebar .sidebar-member-menu {position:relative;display:block;padding:0 15px 20px;border-bottom:1px solid #e5e5e5}
    .sidebar .sidebar-member-menu .sidebar-lg-btn {margin-bottom:20px}
    .sidebar .sidebar-member-menu .sidebar-member-btn-box {display:inline-block;float:left;width:50%}
    .sidebar .sidebar-member-menu .sidebar-member-btn {position:relative;background:#656565;width:120px;height:40px;line-height:40px;color:#fff;text-align:center;border-radius:2px !important}
    .sidebar .sidebar-member-menu .sidebar-other-btn {position:relative;background:#252525;width:120px;height:30px;line-height:30px;color:#fff;text-align:center;border-radius:2px !important}
    .header-nav .navbar-nav {position:relative;margin:0;float:none;background:#fff}
    .header-nav .navbar-nav > .nav-li-space {height:44px;border-bottom:none;border-top:1px solid #e5e5e5;background:#f2f2f2}
    .header-nav .navbar-nav > li {float:none}
    .header-nav .navbar-nav > li > a {font-size:13px;padding:10px 15px;color:#000}
    .header-nav .navbar-nav > li a {border-bottom:none;border-top:1px solid #e5e5e5}
    .header-nav .navbar-nav > li a:hover {border-top:1px solid #e5e5e5}
    .header-nav .navbar-nav > li:first-child > a {border-top:1px solid transparent}
    .header-nav .navbar-nav .open .dropdown-menu {border:0;float:none;width:auto;margin:0;padding:0;position:static;box-shadow:none;background-color:transparent}
    .header-nav .navbar-nav .open .dropdown-menu > li > a {color:#757575;line-height:26px;border-top:1px solid #e5e5e5}
    .header-nav .navbar-nav .open .dropdown-menu > li:first-child > a {border-top:1px solid #e5e5e5}
    .header-nav .navbar-nav .open .dropdown-menu > li > a, .header-nav .navbar-nav .open .dropdown-menu .dropdown-header {padding:5px 15px 5px 25px}
    .header-nav .navbar-nav .open .dropdown-menu > li > a:hover, .header-nav .navbar-nav .open .dropdown-menu > li > a:focus {color:#005cff}
    .header-nav .navbar-nav > .open > a, .header-nav .navbar-nav > .open > a:hover, .header-nav .navbar-nav > .open > a:focus {color:#005cff;background:inherit}
    .header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {color:#005cff;background:inherit}
    .header-nav .navbar-nav .dropdown .dropdown-submenu > a {font-size:12px;background:#f8f8f8}
    .header-nav .navbar-nav .open .dropdown-menu .dropdown-menu > li > a {color:#757575;line-height:22px;border-top:1px solid #e5e5e5;padding:5px 15px 5px 35px;background:#f8f8f8}
}

이 질문에 댓글 쓰기 :

답변 3

네.

답변들 감사 드리구요.

강제로 화면을 150% 주는등 css에서 늘려보면 테마콘텐츠 스킨쪽의 style.css영향을 받는건 확실한데..

그보다 먼저 헤더관련 로고화면쪽 영향을 받는것 같은데 발견이 힘 듭니다.

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

회원로그인

진행중 포인트경매

  1. 참여16 회 시작21.01.16 18:00 종료21.01.23 18:00
  2. 참여10 회 시작21.01.16 12:00 종료21.01.23 12:00
  3. 참여40 회 시작21.01.15 12:00 종료21.01.22 12:00

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

© SIRSOFT