팝업 레이어가 모바일에서 제대로 안나오네요.
본문
첫페이지를 개별 페이지로 만들었습니다. 팝업 레이어등록 하고 작동은 잘 되는데요
pc 에서는 잘 나오는데 모바일로 볼때 아래 이미지 처럼 팝업이미지와 하단바 사이에 공간이 떠버리네요.
아무리 해봐도 안되서 질문드려봅니다.
아래 css 코드입니다. 모바일에서 자동으로 줄어들게 했습니다.
뭐를 좀 수정해야 할까요?
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;cursor:move;}
.hd_pops_con {}
.hd_pops img{max-width:100%;height:auto}
.hd_pops_footer {padding:10px 0;background:#33353E;color:#A39B97;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#33353E;color:#A39B97}
.hd_pops_footer button:hover {color:#eee}
@media (max-width: 576px) {
#hd_pop { background: #fff; }
.hd_pops { left: 10px !important; right: 10px !important; background: #fff; }
.hd_pops_con { width: 100% !important; height: 100% !important; background: #fff; }
.hd_pops_con img { width: 100% !important; height: auto !important; }
.hd_pops_footer {padding:10px 0;background:#33353E;color:#A39B97;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#33353E;color:#A39B97}
.hd_pops_footer button:hover {color:#eee}
}
답변 4
이미지 사이즈를 모바일에서 고정 값을 지정하는것은 어떤가요?
.hd_pops_con img { width: 100% !important; height: auto !important; }
height :auto 는 반응형일경우 사용하고 지금처럼 @media (max-width: 576px) 일경우에는 사이즈를 고정값을 주셔도 될거 같습니다.
ㅎㅎㅎ css를 잘 모르지만 도움이 될까하여 몇자 적어 봤습니다.
네 저도 써주신거처럼 다해보았지만 안되더라구요;;
<style>
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;cursor:move;}
.hd_pops_con {}
.hd_pops img{max-width:100%;height:auto}
.hd_pops_footer {padding:10px 0;background:#33353E;color:#A39B97;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#33353E;color:#A39B97}
.hd_pops_footer button:hover {color:#eee}
@media (max-width: 576px) {
#hd_pop { background: #fff; }
.hd_pops { left: 10px !important; right: 10px !important; background: #fff; }
.hd_pops_con { width: 100% !important; height: 100% !important; background: #fff; }
.hd_pops_con img { width: 100% !important; height: auto !important; }
.hd_pops_footer {padding:10px 0;background:#33353E;color:#A39B97;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#33353E;color:#A39B97}
.hd_pops_footer button:hover {color:#eee}
}
</style>
<div id="hd_pop" class="hd_pops">
<h2>popup</h2>
</div>
올리신 코드로만 대충 재구성 해봤는데 테스트를 할수가 없네요
css그대로네요. 이상없다는건지요? newwin.inc.php에서 div를 수정하면 다 깨져서 나오네요 ㅠㅠ
아뇨 테스트 자체를 할수가 없다구요.
올리신 코드만으로는 뭐가 문제인지 판별을 할수가 없습니다.
확인을 더해보니 관리자 페이지에서 네이버 에디터로 사진을 올리게 되었있는데 올리니 쓸데없이 아래 코드들이 뒤에 붙어서 그런거 같네요.
<div><p style="text-align:center;"><img src="../이미지.jpg"></p><br style="clear:both;"> </div><p><br></p>
근데 피씨는 위 코드들이 있어도 아무이상없는데 모바일만 그러네요 ㅠㅠ
싹지우고 <img src="../이미지.jpg"> 만 코드로 넣으니 아무 이상없이는 나옵니다.
네이버 에디터로 올릴때 저 코드들이 안나오게 할수도 있는지요?
<img src="../이미지.jpg"> 이렇게 깔끔하게요~
제로보드를 쓰다가 넘어와서 해보려니 막히는게 점점 많아집니다 ;;
그냥 코드 지워서 올려야겠네요. 답변 달아주신분 들 너무 감사합니다.
레이어의 크기는 지정되어 있는데 해당 이미지가 그 크기에 맞지 않아서 그런것입니다.
