모바일에서 정렬갯수ㅠㅠ

Godislove

2018-02-26 (월) 17:15:11 2,430

<!DOCTYPE html>
<html lang="ko">
<head>
<title>이벤트</title>
<link rel="stylesheet" href="http://www.drceviang.com/css/wr_ui.css" />

<div class="wr-section typeTeam1">
   <div class="inner">
     <ul class="col-lg-2 col-md-2 col-sm-2">
       <li><a href="http://www.drceviang.com/sub/1802.html" target="_blank">
         <div class="imgArea" align="center"> <img src="http://www.drceviang.com/img/event-now.jpg" /> </div></a>
         <div class="infoArea" align="center">
          <div align="right">이달의이벤트</div>
         </div></a>
       </li>
       <li> <a href="http://www.drceviang.com/sub/2018.html" target="_blank">
         <div class="imgArea" align="center"><img src="http://www.drceviang.com/img/event-base.jpg" border="0" /></div></a>
         <div class="infoArea" align="center">
          <div align="right"><img src="http://www.drceviang.com/img/event-base-s.jpg"></div>
        </li>
     </ul>
   </div>
</div>
<div class="wr-section typeTeam2">
<div class="inner">
   <ul class="col-lg-3 col-md-2 col-sm-2">
    <li>
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/1801-s.jpg" border="0" /></div>
     <div class="infoArea" align="center">
     <div align="right"><img src="http://www.drceviang.com/img/event-end-s.jpg"></div>
    </li>
       <li>
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/1712-s.jpg" border="0" /></div>
     <div class="infoArea" align="center">
    <div align="right"><img src="http://www.drceviang.com/img/event-end-s.jpg"></div>
    </li>
<li>
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/1711-s.jpg" border="0" />
     </div></a>
     <div class="infoArea" align="center">
    <div align="right"><img src="http://www.drceviang.com/img/event-end-s.jpg"></div>
    </li>
   </ul>
</div>
</div>

</body>
</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

CSS

@media screen and (max-width:768px) {
/* section style */
.wr-section {padding:10px 0}
.wr-section > .inner {padding:0 10px}
.wr-section > .inner > .title {margin-bottom:40px}
.wr-section > .inner > .title h2 {font-size:18px}
.wr-section > .inner > .title p {font-size:13px; width:100%}
/* column style (mobile) */
.col-sm-1 {margin-left:0; margin-right:0}
.col-sm-1 > li {width:100%; padding-left:0 !important; padding-right:0 !important}
.col-sm-2 > li {width:47%;list-style: none}
.col-sm-3 > li {width:30%;list-style: none}
.col-sm-4 > li {width:25%}
.col-sm-5 > li {width:20%}
.col-sm-6 > li {width:16.666666666%}
.col-sm-7 > li {width:14.2857142%}
.col-sm-8 > li {width:12.5%}
.col-half {max-width:100%}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

1. 모바일에서 볼때

가로 2개씩 보여지게 썼는데

실제로 보면 1개씩만 나오네요, 아무리 수정해도 안되요, 어디를 고쳐야 할까요ㅠㅠ

그리고

2. 링크한 페이지를 PC에서 보시면 첫번째 배너밑에 "이달의 이벤트" 라고 텍스트로 쓴부분이 깨져서 나와요

그래서 다른데는 이미지로 대체해본건데 텍스트가 정상적으로 나올 방법이 있을까요?? ㅜㅜ 왜 깨지지요

모바일 그누보드5

답변 3개

채택된 답변

+20 포인트

유레카56

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-02-26 (월) 17:24:31

bootstrap 사용 하셨는데 임의적으로 수정 하셨나 보네요 max-width 768px 이하의 미디어 쿼리가 있는지 한번더 확인 해 보세요

삐도리

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-02-27 (화) 01:43:24

부트스트랩은 768 이하가 따로 존재하지않기때문에 480 아래로 하나 만드시면 될꺼같으세요.

퍼블리규

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-02-26 (월) 18:36:42

부트스트랩 미디어쿼리... theme/테마명/css 폴더들어가시면 부트스트랩.min.css 있을꺼에요

거기서 .col-lg-2 이거 검색해보세요 그러면 css 나올텐데

50% 안먹히면 편법으로 50% !important 사용해보셔용

유레카님말처럼 768 이하 미디어쿼리없으면 480 으로 하나더 만들어서 넣으세요 ㅎㅎ

답변을 작성하려면 로그인이 필요합니다.

모바일에서 정렬갯수ㅠㅠ

답변 3개

공유하기