테스트 사이트 - 개발 중인 베타 버전입니다

모바일에서 최신 갤러리 오른쪽 여백을 없애고 꽉차게 보이고 싶은데.. 채택완료

다조아해 6년 전 조회 2,614

요즘 5.3 이상으로 업데이트를 시키면서 공부 좀 하고 있는데 막히는 부분이 있어서 질문 올립니다.

모바일 갤러리 최신글 스킨이 그누에 기본으로 제공되지 않더라고요.

 

5.3 이하 버전에서 사용하던 것을 모바일에 적용 할려고 하는데

문제는 100% 적용이 안되서 오른쪽 여백이 좀 남는 현상이 생기고 있습니다.

 

모바일에서 여백부분까지 꽉차게 보이게 할려면 아래 소스를 어찌 수정해야 할까요?

 

 

 

</strong></p>

<p><?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/thumbnail.lib.php');</p>

<p>$imgwidth = 155; //표시할 이미지의 가로사이즈

$imgheight = 90; //표시할 이미지의 세로사이즈

?></p>

<p><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;}</p>

<p>

#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}</p>

<p>/* 폰트불러오기 */</p>

<p>

</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="<a href="<a href="https://img.youtube.com/vi/'.$youtube_key.'/mqdefault.jpg" target="_blank" rel="noopener noreferrer">https://img.youtube.com/vi/'.$youtube_key.'/mqdefault.jpg</a>"><a href="https://img.youtube.com/vi/'.$youtube_key.'/mqdefault.jpg" target="_blank" rel="noopener noreferrer">https://img.youtube.com/vi/'.$youtube_key.'/mqdefault.jpg</a></a>" 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></p>

<p><strong>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

#oneshot ul 을 100%로 선언하시고

li 을 33%, 50% 반응형 제어하시는 사이즈에 맞게 선언하세요.

내부 정렬이나 각각의 margin을 조절하시면서요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

현재로선 아래 소스의 padding 수치를 조정하는 방법이 가장 쉬우실 것 같습니다.

 

</p>

<p>#oneshot li{float:left;list-style:none;text-decoration:none;padding:0 0 0 10px}</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

다조아해
6년 전
우선 답변 감사합니다.

이게 반응형 이라서 가로에서 3개, 세로에서 2개 이런식으로 나오거든요
패딩을 수정하는것으로는 좀 어려울거 같아서 질문 올렸습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인