Solve the issue in this post
Optimize the homepage display using a custom component:
Before optimization:
After optimization:
Custom component CSS code:
/* ========== Ensure consistent top and bottom margins for category rows ========== */
.category-list tbody tr td {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* ========== Overall font size for header columns "Category, Topics, Latest" ========== */
.category-list-header {
font-size: 1.2rem !important;
}
/* Main category font size */
.category-list .category-name .badge-category__name {
font-size: 1rem !important;
}
/* Subcategory font size */
.category-list .subcategory {
font-size: 0.98rem !important;
}
/* Increase right padding for header column "Topics" */
.category-list-header .topics.topic-list-data.num {
padding-right: 50px !important;
}
/* Increase right padding for data column "1 / Week" */
td.topics.topic-list-data.num {
padding-right: 50px !important;
}
/* ========== Control font size for post count numbers ========== */
.topics .value {
font-size: 1.5rem !important;
font-weight: 600 !important;
}
/* ========== Control font size for unit "Week" ========== */
.topics .unit {
font-size: 1rem !important;
}
/* ========== Adjust font size for featured topics on the right side ========== */
/* Featured topic title */
.featured-topic .title {
font-size: 0.97rem !important;
font-weight: 500 !important;
}
/* Last posted time (e.g., "30 days") */
.featured-topic .last-posted-at,
.featured-topic .relative-date {
font-size: 0.9rem !important;
}
/* Topic status icons */
.featured-topic .topic-statuses {
font-size: 0.97rem !important;
}
/* Spacing between individual featured topic blocks */
.featured-topic {
margin-bottom: 2px !important; /* Space between topics */
padding: 5px 0 !important; /* Top and bottom inner padding */
line-height: 1 !important; /* Overall line height */
}