1. 정확한 제품 또는 플러그인 이름
KBoard 모던 갤러리 스킨
2. 상세 내용
KBoard 모던 갤러리 스킨 구매 적용 하였는데 모바일에서 가로 폭이 무척 좁게 나옵니다 CSS 로 수정 조절 할 방법이 없나요
3. 확인 가능한 상세 페이지 주소
4. 수정한 코드 내역 (있다면)
제시해준 CSS 코드 적용 하였으나 그대로 입니다
AI에 의해 자동 생성된 답변이에요 😀
KBoard 모던 갤러리 스킨을 이용해 주셔서 감사합니다. 모바일 환경에서 가로 폭이 좁게 느껴질 경우, 워드프레스 관리자 페이지의 추가 CSS 설정을 통해 레이아웃을 조정할 수 있습니다.
아래의 방법을 순서대로 시도해 보시기 바랍니다.
1. CSS 수정 경로
- 워드프레스 관리자 -> 외모(Appearance) -> 사용자 정의하기(Customize) -> 추가 CSS 메뉴에 아래 코드를 입력합니다.
2. 모바일 가로 폭 확장 코드
모바일 기기(가로 768px 미만)에서 리스트 아이템의 폭을 넓히는 일반적인 코드입니다.
@media screen and (max-width: 768px) {
#kboard-modern-gallery-list .kboard-modern-gallery-item {
width: 100% !important;
margin: 0 0 20px 0 !important;
}
}
3. 이미지 크기 및 레이아웃 최적화
- 위 코드는 한 줄에 이미지 하나가 꽉 차게 나오도록 설정합니다.
- 만약 한 줄에 두 개씩 보여주고 싶다면 width 값을 48% 정도로 조절하고 여백을 조정해 보세요.
- 전체 화면 이탈 방지를 위해 아래 코드를 함께 추가하면 도움이 됩니다.
html, body {
width: 100% !important;
overflow-x: hidden !important;
}
4. 주의사항
- 사용 중인 테마의 기본 설정에 따라 클래스명이 일부 다를 수 있습니다.
- 위 코드를 적용해도 변화가 없다면, KBoard 설정 내의 '커스텀 CSS' 필드에 직접 입력하여 우선순위를 높일 수 있습니다.
직접 수정이 어려우시거나 특정 부분의 세밀한 조정이 필요하신 경우, 코스모스팜 고객지원 커뮤니티를 통해 해당 페이지 주소와 함께 문의하시면 더 정확한 CSS 가이드를 받으실 수 있습니다.
↓ 아래 버튼을 눌러서 피드백해주세요.