아바다 테마 모바일 화면 좌우 패딩값 조정

Home//워드프레스/아바다 테마/아바다 테마 모바일 화면 좌우 패딩값 조정




버전 5.0 이후에는 페이지 템플릿을 기본 템플릿을 사용한 경우에만 해당됩니다.
현재 사용 버전이 5.0 이후 버전이라면 가급적 100% 넓이 템플릿을 사용하고, 모바일에서의 좌/우 간격은 “테마옵션-퓨젼빌더 엘리먼트-컨테이너 엘리먼트-100% 넓이 템플릿 컨테이너 패딩”의 좌/우 값을 조정해서 사용하세요.
만약 5.0 이후 버전인데 아래의 코드를 적용하면, 사용하는 페이지 템플릿에 따라 의도하는것보다 더 좁게 나타날수 있습니다.

mobile-padding-adjust

아바다 테마를 사용해서 웹사이트를 만들면 모바일 버전에서 좌/우 에 컨텐츠 영역에 30px의 패딩값이 적용됩니다.
합하면 60px이나 되기 때문에 모바일 포트레이트뷰(세로뷰)에서 너무 빈 공간이 넓게 느껴질 때도 있습니다.

그래서 저는 avada.kr과 wpbox.kr에서  좌/우 공간을 10px로 조정 해서 사용합니다.(테마옵션에 컨텐츠 영역의 상/하단 패딩값 조정은 있는데 좌/우는 없습니다.)

적용하는 방법은

다음의 코드를

차일드 테마의 style.css 파일 최상단에 또는
어드민-테마옵션-Custom CSS 입력칸에 입력합니다.

코드에 적힌 10px은 원하는 만큼 조정하면 됩니다.

큰 덩어리로 볼때 모바일에서 헤더 영역과 페이지타이틀바 영역, 컨텐츠 영역 , 푸터 영역등 4개의 섹션이 패딩값을 30px로 사용하는데 이중  다른 영역은 큰 메리트가 없어서…컨텐츠 영역만 적용한 것입니다.







|2016. 1. 1|카테고리: 아바다 테마|Tags: |3 개의 댓글

글쓴이 :

3 댓글

  1. Minwon Cho 2016/11/22 - 13:52 - 답글쓰기

    감사합니다!!

  2. 콩콩아빠 2016/01/01 - 15:29 - 답글쓰기

    우와~~~

    안그래도 모바일에서 글이 잘려서 보기 안좋았는데 너무너무 감사합니다.

    자주 댓글을 남기진 못하지만 좋은 정보 잘 사용하고 있어요 ^^

    감사합니다.

    새해 복 많이 받으세요!

댓글 쓰기