css 질문드려요
본문
상품정보를 왼쪽엔 html형식의 테이블을 넣고 오른쪽은 이미지를 넣는 가로 2단 테이블 구조입니다.
웹에서는 잘 나오는데
모바일에서 는 위엔 이미지 아래는 html형식의 글을 위치 하게 하고 싶은데
화면이 작아지면 아래 html 글이 안보이고 없어지네요.ㅜㅜ css에서 설정을 바꿔줘야 할듯한데 작업 의뢰해서 받은거라 모르겟습니다.
================php====================
<?php if ($row['it_head_html'] || $row['it_img10']) { ?>
<article class="detail_box content">
<div class="wrap">
<table>
<tr>
<?php if ($row['it_head_html']) { ?><td><div><?php echo $row['it_head_html']; ?></div></td><?php } ?>
<?php if ($row['it_img10']) { ?><td><div><img src="<?php echo G5_DATA_URL.'/item/'.$row['it_img10']; ?>"></div></td><?php } ?>
</tr>
</table>
<ul class="mobile">
<?php if ($row['it_img10']) { ?><li><img src="<?php echo G5_DATA_URL.'/item/'.$row['it_img10']; ?>"></li><?php } ?>
<?php if ($row['it_mobile_head_html']) { ?><li><?php echo $row['it_mobile_head_html']; ?></li><?php } ?>
</ul>
</div>
</article>
<?php } ?>
================================================================
-================css===============================================
#sub .detail_box.content { padding:0 0 220px; text-align:center; }
#sub .detail_box.content table td { vertical-align:middle; }
#sub .detail_box.content table td div { margin:0 2.5%; }
#sub .detail_box.content table td img { width:100%; }
#sub .detail_box.content .mobile { display:none; }
#sub .detail_box.content .mobile li:first-child { margin:0 0 50px; } /*두개 이미지 */
@media screen and (max-width:640px) {
#sub .detail_box.detail { padding:0 0 120px; }
#sub .detail_box.detail > div > ul { margin:0; padding:30px 0 0; overflow:visible; }
#sub .detail_box.detail > div > ul > li { float:none; width:auto; margin:0; }
#sub .detail_box.detail ul > li.image .list { margin:50px 0 0; }
#sub .detail_box.detail .mobile { margin:55px 0 0; }
#sub .detail_box.content { padding:0 0 120px; }
#sub .detail_box.content table { display:none; }
#sub .detail_box.content .mobile { display:block; }
답변 1
올려주신 내용을 보면
큰 화면에서 table이 보여지고,
작은 화면에서는 table은 사라지고 ul class='mobile' 부분이 보여지도록 되어있어요.
둘다 이미지는 $row['it_img10'] 변수에 담긴 이미지를 쓰는데,
html 은 각기 $row['it_head_html'] 와 $row['it_mobile_head_html'] 를 써요.
화면을 줄였을때 html 이 사라지는 이유는 $row['it_mobile_head_html'] 부분에 값이 없기 때문이 아닐까 생각이 되네요. 상품정보의 html을 입력하실때 모바일 부분은 입력을 안하셨는지 확인해보세요.