모바일 화면 여백조절

안녕하세요. 사이트는 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; }
    }

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

    고맙습니다.

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

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)