작업실

new-basic 테마에서 반응형 가로 스크롤 완벽 해결 방법

우성군 2 6085 0

부트스트랩 반응형을 위한 media all을 수정하여 완벽하게 해결했습니다.


브라우저 크기를 아무렇게나 조절해도 완벽하게 반응하네요 ^^


당연히 스크롤도 안생기고요.



테베님의 방법에 살을 조금 붙여서 수정하였습니다.


/테마루트/colorset/Basic/colorset.css


에서


제일 밑부분 쪽에


/* Responsive */  부분과    /* for G5 */  사이의 코드를 그대로 붙여넣겠습니다.


@media all and (min-width:1200px) {

.at-thema .slider { width: 100%; }

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; max-width: 1200px; width:100%;}

.boxed .navbar-fixed .navbar { max-width: 1200px; }

}


@media all and (max-width:1199px) and (min-width:992px) {

.navbar-wp .dropdown-menu { margin-top: 0px !important;}

.boxed.wrapper { margin: auto; width: 1000px; max-width:100%;}

.boxed .navbar-fixed .navbar { max-width: 1000px; }

}


@media all and (max-width:991px) and (min-width:768px) {

.at-thema .w-box { margin-bottom: 15px; }

.at-thema .carousel-work .figure { margin-bottom: 15px; }

.at-thema .animate-hover-slide img { width: 100%; }

.at-thema .carousel-1 .object { width: 400px !important; }

.at-thema .slider { width: 100%; }

.at-thema .w-banner { margin-bottom: 20px; }

.at-thema .grid1.img-no-space.w-img .mix { width: 50%; }

.at-thema .grid2.img-no-space.w-img .mix { width: 50%; }

.at-thema .grid3.img-no-space.w-img .mix { width: 50%; }

.at-thema .grid4.img-no-space.w-img .mix { width: 50%; }

.at-thema .grid5.img-no-space.w-img .mix { width: 50%; }

.at-thema .grid6.img-no-space.w-img .mix { width: 50%; }

#hd_pop {max-width:100%;}

}


@media all and (max-width:767px) {

.at-thema .navbar-wp .navbar-nav > li > a { padding: 10px 20px !important; color: rgb(76, 76, 76); margin-right: 0px;}

.at-thema .navbar-wp .navbar-nav > li > a:hover {border-radius: 0px !important; color: rgb(255, 255, 255); background-color: rgb(224, 109, 88); }

.at-thema .navbar-wp .navbar-nav > li > a:focus {border-radius: 0px !important; color: rgb(255, 255, 255); background-color: rgb(224, 109, 88); }

.at-thema .navbar-wp .navbar-nav > .active > a {border-radius: 0px !important; }

.at-thema .navbar-wp .navbar-nav > .active > a:hover {border-radius: 0px !important;}

.at-thema .navbar-wp .navbar-nav > .active > a:focus {border-radius: 0px !important;}

.at-thema .navbar-wp .dropdown-menu::after { border: 0px currentColor !important; border-image: none !important; margin-left: 0px; }

.at-thema .navbar-wp .dropdown-menu::before { border: 0px currentColor !important; border-image: none !important; margin-left: 0px; }

.at-thema .top-header .top-header-menu ul.menu > li ul.sub-menu {display: none !important; }

.at-thema .aside-feature { text-align: center; }

.at-thema .aside-feature .icon-feature { text-align: center; }

.at-thema .slider { width: 100%; }

.at-thema .sort-list-btn .btn { margin-bottom: 10px; }

.at-thema .w-box { margin-bottom: 15px; }

.at-thema .carousel-work .figure { margin-bottom: 15px; }

.at-thema .animate-hover-slide .figure img {width: 100%; }

.at-thema .carousel-1 .carousel-inner { height: 420px; }

.at-thema .carousel-1 .carousel-inner { overflow: hidden; }

.at-thema .carousel-1 .carousel-control i { top: 50%; font-size: 36px; font-weight: 600; margin-top: -18px; position: absolute; }

.at-thema .carousel-1 .item-dark { color: rgb(255, 255, 255); }

.at-thema .carousel-1 p { font-size: 16px; }

.at-thema .carousel-1 .object { display: none; }

.at-thema .carousel-1 .fluid.object {margin: 0px; left: 0px; width: 100%; }

.at-thema .carousel-1 .object iframe { width: 100% !important; }

.at-thema .carousel-1 .description { margin: 0px !important; left: 0px !important; top: 50px; width: 100% !important; }

.at-thema .carousel-1 .description .title { background: rgb(255, 255, 255); margin: 0px 0px 15px; padding: 8px 20px; text-align: center; color: rgb(154, 178, 204); font-size: 32px; display: block; }

.at-thema .carousel-1 .description .subtitle { margin: 20px 0px; padding: 0px 15px !important; text-align: center; font-size: 24px; display: block; }

.at-thema .carousel-1 .description p { margin: 0px; color: rgb(255, 255, 255); font-size: 16px; }

.at-thema .carousel-1 .fluid-center.description .features i {background: rgb(255, 255, 255); border-radius: 80px; width: 80px; height: 80px; text-align: center; color: rgb(105, 126, 147); line-height: 80px; font-size: 34px; font-weight: 700; margin-right: 20px; }

.at-thema .carousel-1 .list-carousel { padding-left: 30px !important; }

.at-thema .carousel-3 .figure { margin-bottom: 20px; }

.at-thema .slider { margin: 0px; height: auto; max-height: 440px; }

.at-thema .at-box { text-align: center; }

.at-thema .at-box .pull-right { float: none !important; }

.at-thema .w-banner { margin-bottom: 20px; }

.at-thema .grid1.img-no-space.w-img .mix { width: 100%; }

.at-thema .grid2.img-no-space.w-img .mix { width: 100%; }

.at-thema .grid3.img-no-space.w-img .mix { width: 100%; }

.at-thema .grid4.img-no-space.w-img .mix { width: 100%; }

.at-thema .grid5.img-no-space.w-img .mix { width: 100%; }

.at-thema .grid6.img-no-space.w-img .mix { width: 100%; }

#hd_pop {max-width:100%;}

}


@media only screen and (min-width:1440px) {

.at-thema .slider { width: 100%; }

}


@media all and (max-width:460px) {

.at-thema .post-view img.post-photo { float: none !important; margin:10px auto; }

#hd_pop {max-width:100%;}

}



비교해보시고 수정할 부분은 수정해서 쓰시면 될 듯 합니다.

, , , , ,

2 Comments
테베 2014.10.01 23:33  
@media all and (max-width:1199px) and (min-width:992px) {
.navbar-wp .dropdown-menu { margin-top: 0px !important;}
.boxed.wrapper { margin: auto; width: 1000px; width:100%;}
.boxed .navbar-fixed .navbar { max-width: 1000px; }
}
여기부분에
.boxed.wrapper { margin: auto; width: 1000px; width:100%;}
에 width가 2번들어갔습니다. 브라우저 엔진에 따라 다른 모양이 나올 수 있으니
.boxed.wrapper { margin: auto; width: 1000px; max-width:100%;}와 같은 형태로 바꾸시는 것이 좋을 듯 합니다.
우성군 2014.10.01 23:34  
고맙습니다 ^^