css 질문드려요

css 질문드려요

QA

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을 입력하실때 모바일 부분은 입력을 안하셨는지 확인해보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 16,737
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT