반응형 모바일 페이지 화면 줄어드는 현상 (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
통합 css파일인데 특정화면에서만 변화가 있다면
그외 css파일이 호출되는지 체크를 먼저 해보셔야합니다.
네 그누스트랩말씀처럼 다른 변수가 있는지확인해보세요
네.
답변들 감사 드리구요.
강제로 화면을 150% 주는등 css에서 늘려보면 테마콘텐츠 스킨쪽의 style.css영향을 받는건 확실한데..
그보다 먼저 헤더관련 로고화면쪽 영향을 받는것 같은데 발견이 힘 듭니다.
답변을 작성하시기 전에 로그인 해주세요.