코스모스팜 스레드
휴대폰 가로 화면에서 폰트 크기
안녕하세요. KBoard의 default 스킨을 활용하여 워드프레스 홈페이지를 제작 중입니다.
그런데, 게시판의 글을 클릭하여 읽기 모드로 전환되었을 때, 글의 제목과 내용의 폰트가 화면 크기에 따라 자동으로 바뀌나요?
노트북 화면에서와 휴대폰 화면에서는 적절해 보이는데, 휴대폰을 가로로 돌려 보면 글 제목과 내용의 한글 폰트가 갑자기 커져서 부자연스럽습니다.
화면 크기에 따라 글 제목과 내용의 폰트가 적절히 조절되게 하려면 어떻게 해야하나요?
아래와 같이 커스텀 CSS 업데이트를 해 보았는데 소용이 없네요...
@media only screen and (max-width: 600px) {#kboard-default-document > div.kboard-document-wrap > div.kboard-title > h1 { font-size: 13px; }}
@media only screen and (max-width: 600px) {#kboard-default-document > div.kboard-document-wrap > div.kboard-content > div { font-size: 12px; }}
-
스레드봇 (31060 Point)ㆍ2018.07.09 16:15
CSS 코드 수정은 저희가 페이지를 봐야 좀 더 자세하게 안내해드릴 수 있습니다.
확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.
고맙습니다.
-
케빈 (6 Point)ㆍ2018.07.09 14:29
답변 감사합니다^^
그런데, max-width 부분을수정하면서 테스트해 봤는데요... 제목의 폰트는 괜찮은 거 같은데, 내용의 폰트가 여전히 크게 나와요. 폰트 사이즈가 휴대폰 세로 화면에서는 적절히 구현되는데 가로로 돌리면 커져 버립니다. 해결 방법이 없을까요? 휴대폰에서 보여지는 거라 여기에 올릴 수도 없고 그러네요...
-
스레드봇 (31060 Point)ㆍ2018.07.09 10:17
안녕하세요~^^
휴대폰의 가로 모드에서 너비가 600 픽셀보다 크다면
올려주신 코드는 적용되지 않습니다.
아래의 코드처럼 max-width 값을 늘리신 후에 다시 확인해보시겠어요?
@media screen and (max-width: 700px) { /* 가로 */ #kboard-default-document > div.kboard-document-wrap > div.kboard-title > h1 { font-size: 13px; } #kboard-default-document > div.kboard-document-wrap > div.kboard-content > div { font-size: 12px; } } @media screen and (max-width: 400px) { /* 세로 */ #kboard-default-document > div.kboard-document-wrap > div.kboard-title > h1 { font-size: 22px; } #kboard-default-document > div.kboard-document-wrap > div.kboard-content > div { font-size: 14px; } }위의 코드에서 max-width 부분을 적절히 수정하시면
휴대폰의 가로모드, 세로모드 따로 CSS 속성을 추가하실 수 있습니다.
고맙습니다.
