가로스크롤
본문
모바일에서 팝업을 띄웠고
가로 사이즈 100% 로 지정하였는데 가로스크롤이 생깁니다..
오버플로우 주면 팝업이 다 사라져서 ㅜ 어디를 수정해야할까요??
<!-- 팝업레이어 시작 { -->
<div id="hd_pop">
<h2>팝업레이어 알림</h2>
<?php
for ($i=0; $nw=sql_fetch_array($result); $i++)
{
// 이미 체크 되었다면 Continue
if (isset($_COOKIE["hd_pops_{$nw['nw_id']}"]) && $_COOKIE["hd_pops_{$nw['nw_id']}"])
continue;
?>
<div id="hd_pops_<?php echo $nw['nw_id'] ?>" class="hd_pops" style="top:<?php echo $nw['nw_top']?>px;left:<?php echo $nw['nw_left']?>px">
<div class="hd_pops_con" style="width:<?php echo $nw['nw_width'] ?>px;height:<?php echo $nw['nw_height'] ?>px">
<?php echo conv_content($nw['nw_content'], 1); ?>
</div>
<div class="hd_pops_footer">
<button class="hd_pops_reject hd_pops_<?php echo $nw['nw_id']; ?> <?php echo $nw['nw_disable_hours']; ?>"><strong><?php echo $nw['nw_disable_hours']; ?></strong>시간 동안 다시 열람하지 않습니다.</button>
<button class="hd_pops_close hd_pops_<?php echo $nw['nw_id']; ?>">닫기 <i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>
<?php }
if ($i == 0) echo '<span class="sound_only">팝업레이어 알림이 없습니다.</span>';
?>
</div>
css
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0;width: 100%;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background: #184c86;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background: #184c86;text-align:left;}
.hd_pops_footer .hd_pops_close {background: #184c86;position:absolute;top:0;right:0;}
@media (max-width: 768px){
.hd_pops{left: 0 !important;}
.hd_pops_con {
max-width: 80vw !important;
height: auto !important;
}
.hd_pops_footer .hd_pops_reject{font-size: 12px;}
.hd_pops_footer .hd_pops_close{font-size:12px;}
}
@media all and (max-width:480px){
#hd_pops_2{top: 400px !important; }
#hd_pops_3{top: 700px !important; }
#hd_pops_4{top: 1000px !important; }
}
답변 1
결과물을 봐야 알것같지만
.hd_pops에 max-width: 80vw !important; 를 줘보시고
.hd_pops_con에는 max-width : 100% 를 줘보십시요
스크롤이 생기는 경우는 자식요소가 부모요소의 크기를 넘어갈때 생깁니다.