모바일에서 최신 갤러리 오른쪽 여백을 없애고 꽉차게 보이고 싶은데..
본문
요즘 5.3 이상으로 업데이트를 시키면서 공부 좀 하고 있는데 막히는 부분이 있어서 질문 올립니다.
모바일 갤러리 최신글 스킨이 그누에 기본으로 제공되지 않더라고요.
5.3 이하 버전에서 사용하던 것을 모바일에 적용 할려고 하는데
문제는 100% 적용이 안되서 오른쪽 여백이 좀 남는 현상이 생기고 있습니다.
모바일에서 여백부분까지 꽉차게 보이게 할려면 아래 소스를 어찌 수정해야 할까요?
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$imgwidth = 155; //표시할 이미지의 가로사이즈
$imgheight = 90; //표시할 이미지의 세로사이즈
?>
<style>
#oneshot { position:relative;margin:0 0 0 -5px;}
#oneshot .la_title{position:absolute; left:0; top:0; z-index:100; background:#000; padding:0px; font-size:1em; color:#fff;margin:0 0 0 0px;filter:alpha(opacity=50);opacity:.5;}
#oneshot .img_set{width:<?php echo $imgwidth ?>px; height:<?php echo $imgheight ?>px; background:#fafafa;padding:0;}
#oneshot .subject_set{width:<?php echo $imgwidth - 5 ?>px; height:24px; padding:0px 0px 0px 0px; z-index:1; bottom:0; left:0;}
#oneshot .subject_set .sub_title{color:#333;height:39px;overflow:hidden;padding:0px 0 0 0;font-size:1em;font-family:ngeot;text-align:center}
#oneshot .subject_set .sub_content{color:#8c8a8a;height:0px;overflow:hidden;padding:0px 0 0;font-family:ngeot;}
#oneshot ul {list-style:none;clear:both;margin:0;padding:0;}
#oneshot li{float:left;list-style:none;text-decoration:none;padding:0 0 0 10px}
.subject_set a:link, a:visited {color:#333;text-decoration:none}
.subject_set a:hover, a:focus, a:active {color:#e60012;text-decoration:none}
/* 폰트불러오기 */
</style>
<div id="oneshot">
<!-- <div class="la_title"><?php echo $bo_subject ?></div>-->
<ul>
<?php for ($i=0; $i<count($list); $i++) { ?>
<li>
<div class="img_set">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $imgwidth, $imgheight);
if($thumb['src']) {
$img_content = '<img class="img_left" src="'.$thumb['src'].'" alt="'.$list[$i]['subject'].'" width="'.$imgwidth.'" height="'.$imgheight.'">';
} else {
$youtube_key = substr($list[$i]['wr_10'],-11,11);
$img_content = '<img src="https://img.youtube.com/vi/'.$youtube_key.'/mqdefault.jpg" alt="'.$thumb['alt'].'" width="'.$imgwidth.'" height="'.$imgheight.'">';
}
echo $img_content;
?>
</a>
</div>
<div class="subject_set">
<div class="sub_title"><a href="<?php echo $list[$i]['href'] ?>"><?php echo cut_str($list[$i]['subject'], 20, "..") ?></a></div>
</div>
</li>
<?php } ?>
</ul>
</div>
<div style="clear:both;"></div>
답변 2
#oneshot ul 을 100%로 선언하시고
li 을 33%, 50% 반응형 제어하시는 사이즈에 맞게 선언하세요.
내부 정렬이나 각각의 margin을 조절하시면서요.
현재로선 아래 소스의 padding 수치를 조정하는 방법이 가장 쉬우실 것 같습니다.
#oneshot li{float:left;list-style:none;text-decoration:none;padding:0 0 0 10px}
우선 답변 감사합니다.
이게 반응형 이라서 가로에서 3개, 세로에서 2개 이런식으로 나오거든요
패딩을 수정하는것으로는 좀 어려울거 같아서 질문 올렸습니다.
답변을 작성하시기 전에 로그인 해주세요.