질문/답변
Toc 오른쪽 여백이 광고까지 침범하는데 해결 방법이 있을까요 ㅠ
뚜리뚜바
* 한 줄 무성의 게시글은 무통보 삭제 됩니다.
제가 본문 상단에 우측으로 광고를 내는 편인데, 이게 고정이라 움직이지도 못하는 상황이라; 왼쪽에 목차가 딱 들어 맞으면 좋을 것 같은데,
이게 보니 제목이 길면 저렇게 광고까지 영역이 침범하게 되더군요. 글은 잘들어가져도 오른쪽으로 toc 목차 박스가 침범하는 상황이라;; 뭘만져야 될지를 모르겠습니다
선배님들 아시는 분 혹시 있으실까요? ㅠㅠ
/* PC 화면에서는 목차칸의 너비를 200px로 고정 */
@media screen and (min-width: 768px) {
.book-toc {
max-width: 200px;
}
}
/* 모바일 화면에서는 목차칸의 너비를 100%로 설정 */
@media screen and (max-width: 767px) {
.book-toc {
max-width: 100%;
}
}
조건부로 목차크기 반영되게 하는 CSS라고 해요. 한번 복사해서 넣어보세요. 안되면 그냥 삭제하면 되니까요.
화면 크기가 767 이하면 목차가 전부 표시되고, 767초과면 목차 크기가 50%만 표시되게 한다해요.
book-toc은 fit-cotents로 바꿔주시고요.
스킨을 어떤것 사용하시는지 모르겠네요. 제가 북클럽을 사용하는 중이라서, 북클럽 기준으로 밖에 설명을 못드려요.
우선 목차를 만드셨으니, 목차에 해당하는 CSS는 어디에 삽입하셨는지 알고계실꺼에요.
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #b0d197;
padding: 10px 20px 10px 15px;
margin: 10px 0 30px 0;
}
대충 이런식으로 입력이 되어있을텐데, 여기서 width가 목차칸의 길이에요. fit-content라고 입력되어있으면, 목차 제목 내용에 맞춰서 자동으로 크기가 설정되는 것이고요. 저 width 부분을 수동으로 특정 숫자(300px 등)로 바꿔주시면 원하시는대로 목차의 가로 길이가 고정될꺼에요.
우측에 광고 삽입하신것 위치는 제가 알 수 없으니, 목차 길이는 직접 숫자 입력 하시면서 확인하셔야 해요.
만약 소제목이 너무 길어서 이상하게 표시된다면, 아래에 속성 white-space: normal 한줄을 추가해줘보시고요.