여러분, 안녕하세요.
카테고리 페이지에서 카테고리 이미지의 위치를 CSS로 변경할 수 있는 방법이 있을까요?
기본적으로 이미지는 카테고리 이름의 "왼쪽"에 배치되며, 제목과 설명의 높이를 모두 채우도록 시도합니다. 하지만 모바일에서는 이미지가 그냥 그 자리에 머물러 있고, 저는 이미지 위치를 카테고리 제목 텍스트 앞이나 뒤로 옮기고 싶습니다. 그런데 어떻게 해도 잘 안 되네요.
category-text-title과 category-logo aspect-image로 시도해 봤지만, 정렬을 제대로 하지 못하겠습니다. “Categories and Recent Topics” 스타일을 사용하고 있습니다.
조언 주시면 감사하겠습니다!
테마의 모바일 스타일시트에서 다음을 수행하여 모바일에서 카테고리 이름 앞에 이미지를 표시할 수 있습니다:
.category-title-link {
// 요소를 재배열하고 같은 줄에 표시하도록 강제합니다
display: flex;
}
.category-text-title {
// 제목의 순서를 이미지 뒤에 오도록 변경합니다
order: 2;
}
.categories-list .category .category-logo.aspect-image {
// 더 이상 필요하지 않은 이미지의 여분 마진을 제거합니다
margin-top: 0;
}
천만 번의 감사!
댓글을 남겨주셔서 더 감사드립니다. 이렇게 하면 배우기가 훨씬 쉽습니다. 이제 다른 테마에서 이미지를 가운데에 정렬하는 방법을 시도해 볼 수 있을 것 같습니다. 정말 감사합니다!
