모바일 뷰를 개선하기 위해 적용한 내 CSS 변경 사항
이 테마를 정말 좋아하지만, 몇 가지 사소한 이상한 부분들이 있어서, 제 취향에 맞게 조금 더 보기 좋게 보이도록 아래 CSS도 추가했습니다. 같은 취향을 가진 다른 분들에게도 도움이 되기를 바랍니다.
원본 (수정 전)
위 사진에서 다음 사항을 주목해 주세요:
- 답변을 나타내는 숫자 1이 너무 왼쪽에 위치해 있습니다.
- 토픽 버블이 파란 배경과 약간 겹쳐 있습니다.
- 모든 콘텐츠와 파란 배경 사이에 패딩이 없습니다.
- 파란 배경이 카테고리 페이지에서는 보기 좋지 않습니다. 하지만 홈 페이지에서는 좋아합니다.
모바일 탭에 추가한 CSS 코드입니다.
/* 카테고리, 하위 카테고리, 태그, 검색, 최신, 새 토픽, 알림 영역에 패딩 추가 */
.list-controls {
padding: 5px;
}
/* 토픽 영역에 패딩 추가 */
div#list-area {
padding: 6px;
}
/* 답변 수를 더 오른쪽으로 정렬 */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
float: right;
}
업데이트된 모습 (CSS 추가 후)
여러분도 파란 배경을 제거하는 것을 선호하신다면, 카테고리 페이지에서만 제거하는 코드는 다음과 같습니다.
/* 카테고리에서만 파란 배경 제거 */
html .category .background-container {
background: #fff;
clip-path: none;
}
