채택완료

모바일화면에서의 화면 여백

2023-03-18 (토) 00:13:43 2,265

pc에선 왼쪽과 오른쪽 배너들이 브라우저 크기에 따라 보였다 사라졌다 하는데요

모바일에선 왼쪽 오른쪽 여백도 없이 가운데 화면만 보여지게 하려면 어떻게 해야 할까요...

|

답변 1개 / 댓글 2개

채택된 답변
+20 포인트

이미지로 제작되어잇는 컨테츠 부분을 보여주어야할것과

감추어야할 영역을 

서로 다른 class로 이름을 지정하시고

반응형 사이즈에 맞게 

left-main 과 같이 display:none 되게끔

넣어두시면됩니다.

답변에 대한 댓글 2개

감사합니다..
그래도 모바일화면 오른쪽에 그래도 여백이 많이 남는데....ㅜㅜ
이부분에서 잘못된게 있을까요?

@media screen and (max-width: 1249px) {
.left_main {display:none;}
.left_top {display:none;}
.right_main {display:none;}
.right_top {display:none;}
}


@media screen and (min-width: 1250px) and (max-width: 1499px) {
.left_main {display:inline-block;}
.left_top {display:inline-block;}
.right_main {display:none;}
.right_top {display:none;}
}

@media screen and (min-width: 1500px) {
.left_main {display:inline-block;}
.left_top {display:inline-block;}
.right_main {display:inline-block;}
.right_top {display:inline-block;}
}
여백이 많이 남는건 ctrl + shift + c 를누르고 그 여백을 클릭해보면 개발자도구에
어떤영역의 여백인지 알수있습니다
이미지가 큰것일수도있고
보이지 않는 태그가 잡혀있거나 좌측이 떼어져있을수 있습니다

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