new-basic 테마에서 반응형 가로 스크롤 완벽 해결 방법
컨텐츠 정보
- 11,958 조회
- 2 댓글
- 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%;}
}
비교해보시고 수정할 부분은 수정해서 쓰시면 될 듯 합니다.
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.
-
링크
테베님의 댓글
.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%;}와 같은 형태로 바꾸시는 것이 좋을 듯 합니다.