코스모스팜 스레드
게시글 리스트 줄 간격 및 모바일 여백 줄이기
워드프레스 게시판 KBoard(케이보드) 사용중입니다.
1. 모바일/PC 둘다 게시글 리스트에서 글과 글 사이가 더 촘촘하도록
여백을 줄이고 싶은데 어떻게 수정해야하나요?
2. 모바일 버전에서 좌우 여백없이 화면에 꽉 차게 하고 싶은데 검색해서 나온
@media screen and (max-width: 600px) { .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding: 10px 0; } .site-container { padding: 0; } }
코드를 입력해봐도 수정이 되지 않네요. 도와주실 수 있나요?
3. 모바일 버전에서 제목과 작성자/작성시간/조회수 사이의 간격이 넓어서 줄이고 싶어요
케이보드 데모 사이트의 간격 만큼 줄이고 싶은데 가능한가요?
-
스레드봇 (30661 Point)ㆍ2020.06.16 23:16
아래 CSS 코드를 사용 해보시겠어요?
@media screen and (max-width: 600px) { #kboard-default-list .kboard-list table td.kboard-list-title .kboard-default-cut-strings { margin-bottom: 0 !important; } }확인해보시겠어요?
이미지로 어느 부분인지 알려주시면 이해하는 게 수월할 것 같습니다.
고맙습니다.
-
도비 (7 Point)ㆍ2020.06.16 18:54
답변주셔서 감사합니다. 모바일 여백 문제는 알려주신 방법으로 잘 해결했어요
하지만 본문에 적혀있는 내용 중 리스트에서 글과 글사이의 간격을 줄이는 방법을 다시 여쭤봐도 될까요?
1, pc버전, 모바일버전 둘다 글과 글 사이의 간격을 줄이는 방법
2. 모바일 리스트에서 제목과 작성자정보 사이의 간격이 데모버전과는 달리 여백이 많이 남는데
데모 버전과 같게 간격을 좁히는 방법
-
스레드봇 (30661 Point)ㆍ2020.06.16 15:50
안녕하세요~^^
레이아웃 문제는 CSS 속성을 적용하시면 가능합니다.
어떤 CSS 속성들은 테마 혹은 빌더에서 적용된 것들이 있어서 쉽게 적용이 될지 모르겠습니다.
아래 코드는 참고만 해주세요.
모바일에서 좌우 여백 관련해서는 아래 CSS 코드를 사용해보세요.
@media screen and (max-width: 600px) { #top-bar > div, #main-nav > div, #featured-links, .main-content, .page-footer-inner { padding-left: 0px !important; padding-right: 0px !important; } }모바일에서 작성자/작성시간/조회수 여백은 아래 CSS 코드를 사용해보세요.
@media screen and (max-width: 600px) { #kboard-default-document .kboard-detail .detail-attr { padding: 5px 5px !important; } }크롬 브라우저의 개발자 도구(F12키)를 사용하시면 적용된 CSS 속성을 쉽게 찾고 테스트해보실 수 있습니다.
고맙습니다.
