모바일 갤러리 리스트 세로2줄 문의드립니다.
본문
안녕하세요.~ 최근 그누보드5를 사용해서 만들어보고있는데요.
감사히 잘사용하겠습니다.~
모바일 부분 갤러리게시판 리스트가 아래 이미지와 같이 할줄로 출력되더라구요.
보시면 한쪽의 공백이 너무 많아서 2로 출력되게 수정하고 싶은데요. 아무리 찾아도 모르겠네요.
이미지수 2줄로 출력하게 할려면 style.css 어디 부분을 수정해야할까요.??
답변부탁드립니다.~~
답변 1
* /mobile/skin/board/gallery/style.css
#bo_gall .gall_li {float:left;;width:50%;padding:5px}
→
#bo_gall .gall_li {float:left;;width:49%;padding:5px}
Ctrl + F5
감사합니다. ^^ PC에서 모바일 모드로 보면 이제 2열로 보이는데요.
스마트폰에서는 인터넷사용기록 삭제하고 새로고침했는데 1열입니다.ㅜㅜ
그리고보니 모바일 메인을 PC에서 보면 2열이네요. 뭐가 잘못 된건지?
우선 PC에서 모바일 모드로는 2열로 보입니다. 답변 감사드립니다.~
45%까지 해보니 스마트폰에서도 2열로 보이네요. ^^ 정말 감사드립니다.~
메인 부분도 같은 부분을 수정하면 될까요.?? mobile.css 의 어디부분을 보면 될런지요.?
크롬 브라우저에서 '검사'를 통해,
css 가 어떻게 적용되어 있는지..
특정 css 요소가 어떤 파일에 정의되어 있는지..
css 를 어떻게 수정해보면 좋을지를
파악해 볼 수 있습니다. https://amina.co.kr/bbs/board.php?bo_table=tip&wr_id=3146
@charset "utf-8";
/* 최근게시물 스킨 (latest) */
.lt_gal{padding:35px 20px 0}
.lt_gal a{text-decoration:none;}
.lt_gal li{position:relative;margin-bottom:20px}
.lt_gal img{width:50%;height:auto;}
.lt_gal .lt_tit{position:absolute;bottom:0;left:0;color:#fff;padding:10px 3%; background:rgba(0,0,0,0.7);display:block;width:94%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;font-size:1.167em}
.lt_gal h2{position:relative;background:url(img/gal_bg.gif) repeat-x 50% ;margin-bottom:10px}
.lt_gal h2 .lt_title {display:inline-block;padding: 0;line-height:25px;padding-left:28px;font-size:1.333em;background:#fff;padding-right:10px;color:#3e3c52}
.lt_gal h2 .lt_title span{background:url(img/gal.gif ) no-repeat 50% 50%;width:20px;height:20px;border-radius:30px;border:1px solid #3e3c52;display:inline-block;position:absolute;top:0;left:0}
.lt_gal .no_img{display:table-cell; vertical-align: middle;font-weight: bold;font-size: 1.3em;color: #bbb;text-transform: uppercase;text-align:center;background: #eee}
.lt_gal .lt_image{text-align:center;display:block;}
.lt_gal .lt_image span{background:#eee;display:block}
.lt_gal .no_lt{text-align:center;width:100%;padding:30px 0}
@media all and (min-width:500px){
.lt_gal li{float:left;width:48%;margin:0 1% 15px}
}
감사합니다. ~ ^^ 어떻게 수정해야할지를 찾을수있네요.
