이 줄을 제거해 보세요:
.subcategories,
1개의 좋아요
카테고리 페이지 링크를 주시겠어요? 한번 보고 싶습니다.
물론입니다, 해당 페이지를 확인해 주세요.
다음 내용으로 CSS를 모두 교체해 보세요:
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
width: 150px;
height: auto;
}
.category-boxes .category-box, .category-boxes-with-topics .category-box {
background-color: #F2F2F2;
}
.category-boxes .description {
display: none;
}
.category-boxes .subcategories {
padding-top: 1em;
}
다음과 같이 표시됩니다:
2개의 좋아요
CSS 코드에 .category-boxes 클래스가 없나요?
아, 그렇군요. Johani의 코드가 박스 스타일을 사용하지 않는 카테고리 페이지에서 사용되도록 작성된 것임을 알아차리지 못했습니다.
박스형 카테고리 아래에 주제 목록을 표시하고 싶지 않다면 "하위 카테고리를 가진 박스"를 선택하고 제 CSS를 적용해 주세요.
박스형 카테고리 아래에 주제 목록을 표시하고 싶다면 제 코드는 작동하지 않지만, 작동하도록 수정해 볼 수는 있습니다.
2개의 좋아요
훌륭한 지원에 감사드립니다. 서브카테고리에 padding-top을 적용해 볼 예정입니다. 또한 CSS Grid로 해당 카테고리 컴포넌트를 다시 만들어 볼 계획입니다. 
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.category-description {
display: none;
}
tbody {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
tr {
display: inline-block;
width: 250px;
min-height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
}
.category {
padding: 1.25em 0;
border-width: 0;
display: block;
width: 100%;
height: calc(100% - 2.5em);
position: relative;
background: #f2f2f2;
display: flex;
flex-direction: colum;
flex-wrap: wrap;
align-items: center;
.category-logo {
float: unset;
margin: 0 auto;
}
h3 {
a[href] {
display: flex;
flex-direction: column;
width: 250px;
order: 1;
.category-text-title {
justify-content: center;
}
}
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
border-left: 6px solid;
opacity: 0.35;
border-color: inherit;
}
.subcategories {
.category-name {
margin-top: 0;
}
.badge-notification {
display: none;
}
}
}
}
}
이렇게 보입니다:
Johani의 CSS를 수정했는데, 그의 원래 수정 사항들이 어떤 역할을 하는지 정확히 모르기 때문에 제가 한 수정 사항들이 얼마나 신뢰할 수 있는지 확신이 서지 않습니다.
2개의 좋아요
이제 작동합니다! 또한 CSS Flex 속성을 일부 변경했습니다. 하지만 문제가 하나 있습니다. @Johani의 코드에서는 모바일 디자인에서 카테고리가 정상적으로 나열됩니다. 하지만 우리의 코드는 모바일에서 작동하지 않습니다. Joe의 코드에서 모바일 카테고리 목록을 확인했는데, 모바일에서 카테고리를 나열하는 방식에 어떤 차이가 있는 것인가요? 
정말 멋진 주제입니다!
하위 카테고리 목록을 옆으로 나란히 배치하는 대신, 한 열(column)로 표시하려면 어떻게 해야 할지 궁금합니다.
현재 뷰입니다. 이 스타일을 찾고 있습니다.
- 공지사항
- Pimax 공식
- 사이트맵
그 옆에 하위 카테고리의 신규/안 읽은 글 수를 표시하는 형태로요.
어떤 이유에서인지 동일한 코드를 사용해도 텍스트가 박스 중앙에 정렬되지 않습니다. 반면 이미지는 중앙 정렬이 됩니다. 텍스트를 입력해 보았지만, 이미지가 텍스트와 함께 움직입니다. 제가 어디서 잘못하고 있는지 아는 분이 계신가요?