작업실

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

컨텐츠 정보

본문

부트스트랩 반응형을 위한 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개 / 1페이지

테베님의 댓글

@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%;}와 같은 형태로 바꾸시는 것이 좋을 듯 합니다.
Total 157 / 12 Page
RSS
소셜로그인 5종 탑재하였습니다. 댓글 2

구글, 페이스북, 트위터, 네이버, 카카오톡 5종이면 거의 모든 인터넷 사용자들을 만족시킬 수 있겠죠? ^^네이버는 도사님 작품이라 올리진 못하…

그누보드5 아미나ASR 테마에 구글 캘린더 설치하기 댓글 3

위와 같이 그누보드5에 구글 캘린더를 넣는 방법입니다.1. 소스 생성하기구글 캘런더에 들어가서 위와 같이 캘린더 설정에 들어갑니다.위와 같이 '…

그누보드5 아미나ASR 테마에 네이버 캘린더 설치하기 댓글 14

네이버 캘린더의 공유기능을 이용하여 그누보드5에 캘린더를 표시하는 방법을 알아보겠습니다.1. 소스 생성하기http://blog.naver.com…

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

부트스트랩 반응형을 위한 media all을 수정하여 완벽하게 해결했습니다.브라우저 크기를 아무렇게나 조절해도 완벽하게 반응하네요 ^^당연히 스…

ASR테마에서 가로 스크롤 안보이게 하는 방법 댓글 6

특정 해상도에서 가로 스크롤이 생겨 보기 좋지 않은데요.임시적으로 가로 스크롤을 안보이게 할 수 있습니다./테마루트/colorset/Basic/…

소셜로그인 아이콘팩

현재 제 홈페이지에 적용 중인 아이콘팩입니다.출처는 관련 링크에 있으니 PSD 파일 받고 싶은 분은 참고하시구요.네이버는 아이콘팩에 맞게 수정했…

최근글


새댓글


알림 0