안녕하세요 메인 페이지 관련 질문 들비니다.
본문
현제 제가 사이트 작업을 하고 있는데요
http://www.jisim.or.kr/index.php
공지사항 / Q&A / 후원안내 배너 아래 갤러리
이것을 화면을 줄였을 때 한줄씩 나오게 하려면 어떻게해야 하나요
공지사항
Q&A
후원안내 배너
갤러리 사진 1
갤러리 사진 2
갤러리 사진 3
갤러리 사진 4
이렇게 화면을 줄였을 때 나왔으면 합니다.
죄송합니다. 실력이 부족해서요
아래 갤러리 부분은 2칸식 나오더라구요
답변 3
@media (max-width:991px) {
.mb_left { margin:0 auto; width: 90%; padding-right: 5px;}
.mmt_right1 {clear:both; margin:0 auto; width: 90%; padding-right: 5px;float:none;}
}
미디어쿼리를 이용한 css를 적용하면 됩니다
/theme/basic3/site_style.css 맨아래줄에 위의 소스를 추가하시거나 인덱스 body 아래에 넣으면 적용되실거에요
적용된 스샷은 아래 이미지를 보시면 알수 있습니다
포토갤러리가 2단으로 바뀌는 시점인 991px 을 기준으로 했습니다
정말 감사 드립니다.
이렇게 친절하게 답변 해주셔서 정말 감사 합니다.
그런데 게시판 같은 경우에는 위의 스삿처럼은 보이지 않는 것 같아요
왜 그런 것인지 궁금 합니다.
<!-- 메인페이지 중앙 시작 -->
<style>
/* ======================================== main */
.m_top {display: inline-block; width: 100%; margin-top: 100px; margin-bottom: -5px; background: url(../../../img/main/line.png) right 315px no-repeat; }
.m_mid {display: inline-block; width: 100%; margin-bottom: 20px; }
.m_bot {display: inline-block; width: 100%; }
.mb_left {float: left; width: 40%; padding-right: 5px; }
.mb_right {float: left; width: 40%; padding-left: 5px; }
.m_ani_lt {position: absolute; left: 13%; top: 120px; }
.m_ani_rt {position: absolute; right: 10%; top: 120px; }
/* ======================================== slide*/
.
.
.
</style>
확인해 보니 인덱스 파일안에 스타일이 적용되어 있는 것을 발견했습니다
CSS 특성상 맨 마지막 CSS를 적용하게 되어 있어서 그래요
그렇기에 위의 소스에서
.mb_left {float: left; width: 40%; padding-right: 5px; }
.mb_right {float: left; width: 40%; padding-left: 5px; }
보다 아래에
@media (max-width:991px) {
.mb_left { margin:0 auto; width: 90%; padding-right: 5px;}
.mmt_right1 {clear:both; margin:0 auto; width: 90%; padding-right: 5px;float:none;}
}
예를들면
기존코드
/* ======================================== main */
.m_top {display: inline-block; width: 100%; margin-top: 100px; margin-bottom: -5px; background: url(../../../img/main/line.png) right 315px no-repeat; }
.m_mid {display: inline-block; width: 100%; margin-bottom: 20px; }
.m_bot {display: inline-block; width: 100%; }
.mb_left {float: left; width: 40%; padding-right: 5px; }
.mb_right {float: left; width: 40%; padding-left: 5px; }
.m_ani_lt {position: absolute; left: 13%; top: 120px; }
.m_ani_rt {position: absolute; right: 10%; top: 120px; }
/* ======================================== slide*/
를 아래처럼 해주세요
/* ======================================== main */
.m_top {display: inline-block; width: 100%; margin-top: 100px; margin-bottom: -5px; background: url(../../../img/main/line.png) right 315px no-repeat; }
.m_mid {display: inline-block; width: 100%; margin-bottom: 20px; }
.m_bot {display: inline-block; width: 100%; }
.mb_left {float: left; width: 40%; padding-right: 5px; }
.mb_right {float: left; width: 40%; padding-left: 5px; }
.m_ani_lt {position: absolute; left: 13%; top: 120px; }
.m_ani_rt {position: absolute; right: 10%; top: 120px; }
@media (max-width:991px) {
.mb_left { margin:0 auto; width: 90%; padding-right: 5px;}
.mmt_right1 {clear:both; margin:0 auto; width: 90%; padding-right: 5px;float:none;}
}
/* ======================================== slide*/
혹시 그래도 잘안되면
@media (max-width:991px) {
.mb_left { margin:0 auto; width: 90%; padding-right: 5px;}
.mmt_right1 {clear:both; margin:0 auto; width: 90%; padding-right: 5px;float:none;}
}
대신 아래 처럼 .mb_left 의 속성에도 float:none 을 추가해 보세요
@media (max-width:991px) {
.mb_left { margin:0 auto; width: 90%; padding-right: 5px;float:none;}
.mmt_right1 {clear:both; margin:0 auto; width: 90%; padding-right: 5px;float:none;}
}