반응형 테마를 쓰고있습니다
본문
반응형 테마를 사용중입니다.
반응형 테마를 사용하는데.. 게시판 스킨도 반응형 이긴한데..
갤러리 같은경우.
ㅁㅁ
ㅁㅁ
ㅁㅁ
이렇게 보여주고싶은데.
조금한 네모
ㅁㅁㅁㅁ
ㅁㅁㅁㅁ
이런식으로 출력이되서요..
css
에서
.gall_row .col-gn-4{width:25%}
저기를
.gall_row .col-gn-4{width:50%}
으로 강제로 주니까 원하는대로 되긴하는데..
PC에서 접속해도
동일하게
ㅁㅁ
이렇게 출력이됩니다..ㅠㅠ
방법이 있을까요..?
/* 갤러리 목록 */
#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_ul {margin:10px -10px 0;padding:0;list-style:none;zoom:1}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_gall .gall_box {position:relative;margin:0 0 30px 0;border:1px solid #ccc;background:#fff;border-radius:0 0 2px 2px}
#bo_gall .gall_li .gall_chk{position:absolute;top:0;left:0;padding:5px;}
.gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10{position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0;}
.gall_row .col-gn-0,.latest_row .col-gn-1{width:100%}
.gall_row .col-gn-2{width:50%}
.gall_row .col-gn-3{width:33.33333333%}
.gall_row .col-gn-4{width:25%}
.gall_row .col-gn-5{width:20%}
.gall_row .col-gn-6{width:16.66666667%}
.gall_row .col-gn-7{width:14.28571428%}
.gall_row .col-gn-8{width:12.5%}
.gall_row .col-gn-9{width:11.11111111%}
.gall_row .col-gn-10{width:10%}
.gall_row .box_clear{clear:both}
#bo_gall .gall_now .gall_text_href a {color:#ff3061}
#bo_gall .gall_href a:link, #bo_gall .gall_href a:focus, #bo_gall .gall_href a:hover {text-decoration:none}
#bo_gall .gall_img{border-bottom:1px solid #eee;text-align:center}
#bo_gall .gall_img a,#bo_gall .gall_img .no_image,#bo_gall .gall_img .is_notice{display:block}
#bo_gall .gall_img img{max-width:100%;height:auto !important}
#bo_gall .gall_img span{display:inline-block;background:#eee;text-align:center;line-height:150px;text-transform:uppercase;font-weight:bold;font-size:1.25em;color:#777}
#bo_gall .gall_text_href {margin:10px}
#bo_gall .gall_text_href a {font-weight:bold}
#bo_gall .gall_text_href img {margin:0 0 0 4px}
#bo_gall .bo_tit{display:block;font-weight:bold;color:#000;font-size:1.083em}
#bo_gall .bo_tit .cnt_cmt{background:#5c85c1;color:#fff; font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle;
-webkit-box-shadow: inset 0 2px 5px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 2px 5px rgba(255,255,255,0.3);
box-shadow: inset 0 2px 5px rgba(255,255,255,0.3);}
#bo_gall .profile_img img{border-radius:50%}
#bo_gall .gall_name{margin:10px}
#bo_gall .bo_tit .fa-download{width:16px;height:16px;line-height:16px;background:#e89f31;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle}
#bo_gall .bo_tit .fa-link{width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle;font-weight:normal}
#bo_gall .bo_tit .fa-link{width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle}
#bo_gall .bo_tit .new_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#fff;background:#6db142;text-align:center;border-radius: 2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .hot_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius: 2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .fa-lock{display: inline-block;line-height: 16px;color: #999;text-align: center;vertical-align:middle;}
#bo_gall .gall_info{line-height:1.5em;padding:10px;font-size:0.92em;background:#f6f6f6;line-height:20px}
#bo_gall .gall_info strong{ display:inline-block;margin:0 0 0 10px }
#bo_gall .gall_info i{font-size:12px}
#bo_gall .gall_info .gall_date{position:absolute;bottom:10px;right:10px;font-style:italic;display:inline-block;color:#777;}
답변 2
.gall_row .col-gn-4{width:25%}
@media (max-width: 970px){
.gall_row .col-gn-4{width:50%}
}
이런식으로 미디어쿼리 주셔서 해결할 수 있는 방법과
부트스트랩 css사용하시면 될것같네요
감사합니다.
덕분에 해결했습니다^^
안녕하세요.
덕분에 해결이되었는데..
모바일 로 확인해보니..갤러리 가.
ㅁㅁ
ㅁㅁ
ㅁㅁ
이렇게 가 아니고
ㅁㅁ
ㅁ
ㅁ
ㅁㅁ
ㅁ
ㅁ
막 이런식으로 틀어지는데.. ㅠㅠ 어떻게해야할까요..?
pc 에서 화면 줄였을때는 잘되는데.. 생각지도못했네요 ㅠㅠ
display:inline-block; clear:both에 width:48%; 정도 줘보세요! 해보시고 안되시면
링크좀보여주세요! 링크보면 바로 해결할 수 있을것같은데ㅠ
신경써주셔서 감사합니다.
아래 css 추가하여 수정하였습니다 ^^
@media screen and (max-width:970px){
.gall_row .box_clear{clear:none;}
#gall_ul li:nth-child(2n+1) {clear:both !important;}
}
혹시 html 문서 문제 생기시는 내 클래스 영역을 공유 가능하신가요?
부트스트랩인 것 같은데 아닌 것 같아서요..
답변을 작성하시기 전에 로그인 해주세요.