그누보드5 ASR 스킨 new-basic테마에서 해상도에 따른 반응형 추가하기
컨텐츠 정보
- 12,541 조회
- 2 댓글
- 0 추천
- 목록
본문
기존의 테마는 반응형이지만 최대 가로폭이 1200px이었습니다.
요새는 1600px, 1920px, 2560px 등등 모니터의 크기가 커지면서 홈페이지의 가로폭도 커질 필요성이 높아졌습니다.
그래서 부트스트랩 기반의 new-basic테마를 수정하면서 모니터 크기에 따라 홈페이지 가로폭도 넓힐 방법을 알려드리고자 합니다.
/amina/thema/new-basic_0.3/assets/bs3/cssbootstrap.min.css
위 파일에서
@media (min-width:1200px){.container{width:1170px}}
위 내용 찾아서 그 오른쪽에
@media (min-width:1440px){.container{width:1400px}}
위 내용을 붙여넣습니다.
그리고
/amina/thema/new-basic_0.3/colorset/Basic/colorset.css
에서
@media all and (min-width:1200px) {
.at-thema .slider { width: 100%; }
.navbar-wp .dropdown-menu { margin-top: 0px !important; }
.boxed.wrapper { margin: auto; width: 1230px; }
.boxed .navbar-fixed .navbar { max-width: 1230px; }
}
위 내용을
@media all and (min-width:1440px) {
.at-thema .slider { width: 100%; }
.navbar-wp .dropdown-menu { margin-top: 0px !important; }
.boxed.wrapper { margin: auto; max-width: 1440px; width:100%;}
.boxed .navbar-fixed .navbar { max-width: 1440px; }
}
@media all and (max-width:1439px) and (min-width:1200px) {
.navbar-wp .dropdown-menu { margin-top: 0px !important; }
.boxed.wrapper { margin: auto; max-width: 1230px; width:100%;}
.boxed .navbar-fixed .navbar { max-width: 1230px; }
}
위와 같이 변경합니다.
이것을 응용하면 더 다양하게 해상도에 따라 나눌 수 있습니다 ^^
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.
