코스모스팜 스레드

모바일 화면 여백조절

안녕하세요. 사이트는 http://studioissue.com 이고 모바일에서 보면 양옆 여백이 많이 남습니다. 

이부분을 최대한 화면에 꽉차게 수정하고싶은데요. 

어디에서 어떤 코드를 쓰면 되는지 궁금합니다. 

고수님들의 답변을 기다리겠습니다.

이 페이지의 내용이 유익하시나요? 혹은 더 많은 답변을 받길 원하시면 이 페이지를 공유 해보시는건 어떨까요?

내 홈페이지에 소셜 공유 버튼 추가하기

코스모스팜 회원관리
코스모스팜 회원관리
  • 안녕하세요~^^

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    @media only screen and (max-width: 767px) {
    	.responsive #top #wrap_all .av-flex-cells .no_margin { padding: 0 !important; }
    }

     

    이미지의 좌우 여백을 아예 없애시려면

    아래의 코드로 적용해보시겠어요?

    @media only screen and (max-width: 767px) {
    	.responsive #top #wrap_all .av-flex-cells .no_margin { padding: 0 !important; }
    	.av-large-gap.av-masonry { padding: 0 !important; }
    	.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry { margin-right: 0 !important; }
    }

    고맙습니다.

  • 너무 감사합니다. 

    한가지만 더 질문하고 싶은데 좌우여백과 각 이미지별로 여백을 아주 조금만 두고 싶은데 

    그 여백부분을 조절하려면 어떤 코드를 쓰고 조절하면 될지요?

    @media only screen and (max-width: 767px) { .responsive #top #wrap_all .av-flex-cells .no_margin { padding: 0 !important; } }

    이 코드가 적절하긴 한데요. 아예없애는건 아니고 각 이미지와 좌우까지 여백을 아주 조금만 더 줄이고 싶어서요. 

    맨 아래의 코드는 여백이 아예없어서 조금 수정을 했으면 합니다. 

  • 안녕하세요.

    기존의 코드 대신 아래의 코드로 적용해보시겠어요?

    @media only screen and (max-width: 767px) {
    	.responsive #top #wrap_all .av-flex-cells .no_margin { padding: 0 !important; }
    	.av-large-gap.av-masonry { padding: 15px 0 0 5px !important; }
    	.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry { margin-right: 5px !important; margin-bottom: 5px !important; }
    }

    위 코드에서 픽셀 값을 적절히 수정하신 후에 적용해보시겠어요?

    고맙습니다.

  • 도움이 되었습니다. 감사합니다.

코스모스팜 회원관리