테스트 사이트 - 개발 중인 베타 버전입니다

반응형 CSS 질문입니다. 채택완료

 

첨부 이미지https://kin-phinf.pstatic.net/20180328_212/15222408205521dBGL_JPEG/1-1.jpg?type=w620" width="620" />

 

 

 

첨부 이미지https://kin-phinf.pstatic.net/20180328_297/1522240855893o8aE5_JPEG/1-3.jpg?type=w620" width="620" />

 

 

스타일css 에서 먼가 부족한것같은데

도무지 모르겠어요 어떻게 고쳐야

제가 원하는데로 반응형이 되어서

4개의배너가 고객센터 아래로 내려갈까요?

제소스는 아래 입니다.

 

 

 
 
       
 
       

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

답변 3개

채택된 답변
+20 포인트

이렇게 한번 해보세요

아래에 @media screen and (max-width: 650px){ 이뜻은

디바이스나 윈도우 가로 사이즈 650px 보다 작을때 적용되라는 뜻이에요.

@media screen and (max-width: 650px){

    #middle {      width:100%;      margin:0 auto;     }     .middle-b1 {      float:left;      width:100%;     }     .middle-b2 {      float:right;      width:100%;     }     .middle-b2 img {         width: 100%;     }     .middle-top > a {         display: inline-block;         width: 50%;     }     .middle-top > a:first-child {         text-align: left;     }     .middle-top > a:last-child {         text-align: right;     }

    .middle-top img {      width:calc(100% - 5px);      max-width:100%;      padding-left:0px;     }

    .middle-bottom > a {         display: inline-block;         width: 50%;     }     .middle-bottom > a:first-child {         text-align: left;     }     .middle-bottom > a:last-child {         text-align: right;     }

    .middle-bottom img {      width:calc(100% - 5px);      max-width:100%;      padding-left:0px;     } }

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

안녕하세요^^ 그렇게 하니까 위에 사진 처럼 됐어요
배너가 1줄로 쭉 나와요 ㅠㅠ

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

안보면서 하려니 어렵네요 ㅠㅠ 전 여기까진가봐요 ㅠㅠ

로그인 후 평가할 수 있습니다

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

로그인 후 평가할 수 있습니다

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

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

로그인

전체 질문 목록

🐛 버그신고