워드프레스 GeneratePress 테마: 모바일 기기에서 좌우 여백 조정하기

6

모바일 기기에서 워드프레스 사이트의 좌우 여백이 너무 넓거나 좁아서 조정하는 방법에 대한 질문이 네이버 카페 등을 통해 꾸준히 올라오고 있어 이 글에서는 GeneratePress 테마를 사용하는 사이트에 대하여 모바일 기기에서 콘텐츠 좌우 여백을 조정하는 방법에 대하여 살펴보겠습니다. 다른 테마도 비슷한 방법으로 접근할 수 있습니다.

워드프레스 GeneratePress 테마: 모바일 기기에서 좌우 콘텐츠 여백 조정하기

GeneratePress 테마의 경우 유료 버전에서는 Spacing 모듈을 활성화하면 외부 여백(margin) 및 내부 여백(padding)을 쉽게 설정할 수 있습니다.

무료 버전을 사용한다면 CSS를 이용하여 모바일 기기에서의 좌우 여백 공간을 조정할 수 있습니다.

아바다 등 다른 테마를 사용하는 경우에도 동일하게 접근할 수 있습니다.

  1. 테마 옵션에서 여백 설정 옵션을 제공하면 테마 옵션에서 변경
  2. 여백 관련 설정이 제공되지 않으면 CSS를 사용하여 변경

GeneratePress 유료 버전(GP Premium)을 사용하는 경우 모바일 기기에서 좌우 여백 설정하기

제너레이트프레스 테마 유료 버전인 GP Premium을 설치하여 활성화하였다면 "사용자 정의"에서 여백을 세부적으로 설정할 수 있습니다.

1 GP Premium 플러그인이 활성화되어 있다면 워드프레스 관리자 페이지 » 모양 » GeneratePress로 이동하여 Spacing 모듈을 활성화합니다. 아래 그림과 같이 맨 오른쪽의 버튼이 Deactivate로 표시되면 활성 상태입니다.

2 모양 » 사용자 정의 » Layout » Container 페이지로 이동합니다.

맨 아래의 Content Padding (콘텐츠 패딩) 섹션으로 스크롤한 다음, 모바일 기기 아이콘을 클릭합니다. 그러면 모바일 기기에 대한 내부 여백(Padding)을 설정할 수 있습니다.

3 원하는 여백이 되도록 Content Padding의 Right(오른쪽) 및 Left(왼쪽) 값을 적당히 조정하시기 바랍니다. 오른쪽의 미리 보기 화면에서 여백을 확인할 수 있습니다. (하지만 일부 환경에서는 값을 변경해도 미리 보기 화면에서 변화가 없을 수 있습니다. 그런 경우 변경 후에 실제 스마트폰 등 모바일 기기에서 확인해야 합니다.)

변경 사항을 저장하고 캐시를 삭제한 후에 모바일 장치에서 여백이 적당한지 살펴보세요.

이 방법을 이용하면 사이트 전체에 대하여 모바일 기기에서의 콘텐츠 여백이 적용됩니다. 글(포스트)이나 페이지 등 사이트의 일부에 대한 여백만 조정하고 싶다면 아래의 CSS 방법을 이용해야 합니다.

GP 테마의 무료 버전에서 모바일 기기 좌우 여백 설정하기

제너레이트프레스 무료 버전을 이용하는 경우에는 CSS를 사용하여 여백을 조정할 수 있습니다. 기본적인 CSS는 그리 어렵지 않고 익히는 데 시간이 얼마 걸리지 않으므로 기본적인 CSS를 공부하면 많은 도움이 될 것입니다. (참고로 엘리멘터와 같은 페이지 빌더를 사용할 경우 CSS를 몰라도 웬만한 설정을 할 수 있지만, CSS를 조금 알면 보다 수월하게 활용할 수 있습니다.)

GP 무료 버전을 사용한다면 모양 » 사용자 정의 » 추가 CSS에 다음과 같은 코드를 추가하여 모바일 기기에서 콘텐츠 영역의 좌우 여백을 변경할 수 있습니다. 차일드 테마를 만들고 차일드 테마 내의 스타일시트 파일(style.css)에 입력해도 됩니다.

/* GP 테마: 모바일 기기에서 좌우 여백 조정하기 */
/* GeneratePress Theme: Adjusting Left and Right Margins on Mobile Devices */

@media (max-width: 768px) {
    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .separate-containers .paging-navigation,
    .one-container .site-content,
    .inside-page-header {
        padding: 20px !important;
    }
}

상기 커스텀 CSS 코드는 해상도가 768px 미만인 기기에만 로드됩니다. CSS 미디어 쿼리를 사용하여 기기 해상도에 따라 다른 스타일을 지정할 수 있습니다.

CSS를 조금 아신다면 블로그 글이나 카테고리 또는 태그 페이지 등 아카이브 페이지 등 특정 페이지에만 적용되도록 설정할 수 있습니다.

저는 모바일 기기에서 포스트를 제외한 모든 페이지에 대하여 좌우 여백을 25px로 설정하고, 포스트(글)에는 35px를 지정했습니다.😄

참고

6개 댓글

댓글 남기기

  1. CSS로는 적당히 조정을 해야지 너무 딱 붙게 하니까 화면을 스크롤할 때 좌우가 고정이 안되고 왔다 갔다 하네요.

    답글

  2. 정말 좋은 정보 알아갑니다... 올려주신 팁이 현재는 안먹힐까요? wp-admin 페이지의 appearance - customize - additional css 에
    @media (max-width: 768px) {

    /* GP 테마: 모바일 기기에서 좌우 여백 조정하기 */
    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .separate-containers .paging-navigation,
    .one-container .site-content,
    .inside-page-header {
    padding: 10px !important;
    }

    추가하고 lightspeed cache 에서 purge all 하고 시크릿모드로 해도 원래대로 30px 로 나오네요.. 혹시 제가 놓친게 있을까요?

    답글

      • 소중한 응답 감사합니다. 제가 실수로 위쪽에 있는 css 태그를 안닫아서 제대로 표시가 안된거였네요. 담부터는 제 실수가 아닌지 먼저 확인하고 묻는 습관을 가져야겠습니다.

  3. 모바일 여백 줄이고 싶어서, 어제 ai랑 몇 시간을 씨름하다 결국 포기했는데
    (이것들이 이상한 css만 주더라고요;;; )
    덕분에 해결했습니다. 정말 감사해요!!

    답글