애니빌드.LAB
토론방
소스관련 게시판 모바일버전 미노출
- b**a5665
- 2015-09-01 12:28:00
- hit4296
- http://lab.anybuild.co.kr/bbs/qna/4752
해당계정에서 모바일 홈페이지버전 사용중입니다.
pc에서 해당 주소로 접속할경우 정상적으로 노출이 가능하지만 모바일의 경우 상단과 하단의 디자인 부분만 노출되고 게시판의 내용이 노출되지 않습니다.
어떤부분을 확인해야 하는지 문의드립니다.
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
@ 문제점 확인
- 크롬 브라우저의 '요소검사' 기능을 이용해서 확인해보니, 게시판의 가로크기가 비정상적으로 출력되었습니다.
- 상단에 들어간 네비게이션이 문제가 되는것으로 파악됩니다.
@ 네비게이션 HTML 소스 확인
<div style="width:100%;clear:both;text-align:center;">
<ul style="list-style:none; margin:0% 0% 0% 0%; padding:0% 0% 0% 0%; ">
<li class="intro"><a href="/page/profile"><font color="#ea620c">비파디자인</font></a></li>
<li class="intro"><a href="/page/service"><font color="#ea620c">SERVICE</font></a></li>
<li class="intro"><a href="/page/project"><font color="#ea620c">PROJECT</font></a></li>
<li class="intro"><a href="/myreg/qna"><font color="#ea620c">BOARD</font></a></li>
<li class="intro"><a href="/page/sales"><font color="#ea620c">분양안내</font></a></li>
</li>
</ul>
</div>
@ 네비게이션 CSS 소스 확인
.intro {
float:left;
width:20%;
height:30px;
padding-top:15px;
vertical-align: middle;
}
@ 소스의 문제점
float:left 를 사용할 경우 마지막에 clear 를 해주지 않으면 다음줄에 출력되는 레이아웃이 깨질 수 있습니다.
@ HTML 소스 수정방법 (추가)
<ul style="list-style:none; margin:0% 0% 0% 0%; padding:0% 0% 0% 0%; " class="intro_ul">
@ CSS 소스 수정방법 (추가)
.intro_ul:after {content:''; display:block; clear:both;}