4 Blog Category Page Design Examples and Responsive HTML/CSS Complete Integration
This complete HTML code provides 4 responsive design styles that maximize the aesthetics and user experience (UX) of blog category pages. This integrated code template with thumbnail images, text placement, and responsive layout is optimized for blog operators to increase content click-through rates and dwell time.
The category page is a key element that determines the first impression of a blog. Especially on content-focused platforms, the structure and design of categories alone can influence visitors' click-through rates and dwell time. In this post, we introduce 4 beautiful category design styles that incorporate aesthetics, UX (user experience), and mobile responsiveness, along with ready-to-use HTML code templates.
Core Elements and Structure of Responsive Blog Category Design
Core Elements of Category Design
The category page serves as a navigation hub that guides readers through content flow and as a visual element that completes the overall blog branding. The key design elements are as follows:
- Balanced placement of thumbnail images and text
- Responsive structure compatible with both PC and mobile
- Information delivery including category name, publication date, and summary description
Integrated CSS Code (with my-cat- prefix to prevent CSS conflicts)
The code below is the complete CSS code containing common styles and responsive media queries to implement all 4 styles. Insert this code into the CSS editing area of your blog skin. (my-cat- prefix applied to prevent class name conflicts)
/* CSS Variable Settings */
:root {
--my-cat-primary: #FF5E5B;
--my-cat-secondary: #00CECB;
--my-cat-dark: #2D3047;
--my-cat-light: #F5F5F5;
--my-cat-gray: #939393;
--my-cat-white: #FFFFFF;
}
.my-cat-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
font-family: 'Inter', 'Arial', sans-serif;
}
/* -------------------- Common Element Styles -------------------- */
.my-cat-item {
margin-bottom: 3rem;
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.4s, box-shadow 0.4s;
background-color: var(--my-cat-white);
}
.my-cat-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.my-cat-item a {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.my-cat-thum {
overflow: hidden;
}
.my-cat-thum img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: transform 0.5s;
display: block;
}
.my-cat-item:hover .my-cat-thum img {
transform: scale(1.03);
}
.my-cat-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.8rem;
line-height: 1.3;
color: var(--my-cat-dark);
}
.my-cat-excerpt {
font-size: 1rem;
color: var(--my-cat-gray);
line-height: 1.6;
margin-bottom: 1.2rem;
}
.my-cat-category {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1px;
color: var(--my-cat-primary);
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.my-cat-meta {
font-size: 0.9rem;
color: var(--my-cat-gray);
}
.my-cat-date {
display: inline-block;
margin-top: 5px;
}
/* -------------------- Style 1: Image Overlay -------------------- */
.my-cat-style-overlay {
position: relative;
height: 500px;
overflow: hidden;
}
.my-cat-full-image {
height: 100%;
position: relative;
}
.my-cat-overlay-text {
position: absolute;
bottom: 0;
padding: 2.5rem;
width: 100%;
color: white;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
z-index: 2;
}
.my-cat-style-overlay .my-cat-title {
color: white;
font-size: 2.2rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.my-cat-style-overlay .my-cat-excerpt {
color: rgba(255,255,255,0.9);
font-size: 1.1rem;
}
.my-cat-top-right {
position: absolute;
top: 1.5rem;
right: 1.5rem;
color: white;
z-index: 10;
text-align: right;
}
.my-cat-top-right .my-cat-category {
color: white;
background-color: rgba(255, 94, 91, 0.8);
padding: 5px 10px;
border-radius: 4px;
}
.my-cat-top-right .my-cat-date {
color: rgba(255,255,255,0.9);
}
/* -------------------- Style 2: Left-Right Split -------------------- */
.my-cat-style-split .my-cat-split-layout {
display: flex;
height: 400px;
}
.my-cat-style-split .my-cat-text-box {
flex: 1;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-cat-style-split .my-cat-thum {
flex: 1;
height: 100%;
}
.my-cat-style-split .my-cat-thum img {
border-radius: 0 12px 12px 0;
height: 100%;
}
/* -------------------- Style 3: Right Box with Background Image -------------------- */
.my-cat-style-rightbox {
position: relative;
height: 450px;
}
.my-cat-bg-image {
height: 100%;
position: relative;
}
.my-cat-bg-image img {
border-radius: 12px;
height: 100%;
}
.my-cat-box-text {
position: absolute;
right: 3rem;
top: 50%;
transform: translateY(-50%);
background: rgba(16, 23, 67, 0.9);
padding: 2rem;
width: 40%;
color: white;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
z-index: 10;
}
.my-cat-white-text {
color: white;
}
/* -------------------- Style 4: Centered Text + Image Grid -------------------- */
.my-cat-style-grid {
padding: 3rem;
text-align: center;
}
.my-cat-text-center {
text-align: center;
}
.my-cat-image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 2rem 0;
}
.my-cat-style-grid .my-cat-meta {
margin-top: 1rem;
text-align: center;
}
.my-cat-style-grid .my-cat-image-grid img {
height: 225px;
border-radius: 8px;
}
/* -------------------- Responsive (Mobile) -------------------- */
@media (max-width: 768px) {
.my-cat-container {
padding: 1rem;
}
.my-cat-item {
margin-bottom: 2rem;
}
.my-cat-title {
font-size: 1.5rem;
}
.my-cat-style-split .my-cat-split-layout {
flex-direction: column;
height: auto;
}
.my-cat-style-split .my-cat-thum {
order: -1;
}
.my-cat-style-split .my-cat-thum img {
border-radius: 12px 12px 0 0;
height: 250px;
}
.my-cat-style-rightbox {
height: auto;
}
.my-cat-bg-image img {
height: 300px;
}
.my-cat-box-text {
width: 90%;
right: 5%;
position: relative;
top: 0;
transform: none;
margin: -50px auto 20px;
background: rgba(16, 23, 67, 0.95);
}
.my-cat-image-grid {
grid-template-columns: 1fr;
}
.my-cat-style-overlay, .my-cat-style-rightbox {
height: 350px;
}
.my-cat-overlay-text {
padding: 1.5rem;
}
.my-cat-style-overlay .my-cat-title {
font-size: 1.8rem;
}
.my-cat-style-grid {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
.my-cat-container {
padding: 0.5rem;
}
.my-cat-style-overlay, .my-cat-style-rightbox {
height: 300px;
}
.my-cat-style-overlay .my-cat-title {
font-size: 1.5rem;
}
.my-cat-box-text {
width: 95%;
right: 2.5%;
padding: 1.5rem;
}
}Complete Responsive Category HTML Template Code
The code below is the HTML structure that demonstrates 4 design styles in conjunction with the above CSS. Sample data and temporary image URLs are used instead of Tistory placeholders. You can copy this code as is and save it as an HTML file to immediately view the design in a web browser.
Style 1: Full Image + Text Overlay (my-cat-style-overlay)
Uses the entire thumbnail as a background with text overlaid at the bottom to enhance immersion. (Sample data)
Style 2: Left Text + Right Image Split (my-cat-style-split)
Splits text and thumbnail in a 1:1 ratio left and right to enhance readability of text-centered content. Switches to vertical layout on mobile. (Sample data)
Style 3: Background Image + Right Text Box (my-cat-style-rightbox)
Creates a three-dimensional effect with a text box floating on the background image to focus attention. Information inside the text box uses white text for readability. (Sample data)
Style 4: Text-Centered + Image Grid (my-cat-style-grid)
Places title and summary text in the center and arranges thumbnail images in a 2x1 grid format, useful for showing multiple photos. (Sample data)
You can fine-tune the CSS of each style based on this code to match your blog's characteristics and content nature.
Frequently Asked Questions (FAQ) - Blog Category Design and Application
Q1: How do I apply the above HTML/CSS code to my Tistory blog?
A1: Add the CSS code to the very bottom of the 'CSS' area in skin editing, and for the HTML code, find the placeholder responsible for the category list (List Page) in the 'HTML editing' area (e.g., around ), then modify it by reinserting appropriate Tistory placeholders instead of sample data so that my-cat-item repeats and outputs. It's important to properly utilize Tistory placeholders.
Q2: Why is mobile responsiveness important when modifying category design?
A2: Currently, most blog traffic comes from mobile devices. If the layout breaks on mobile, user experience (UX) deteriorates, leading to increased bounce rates and lower SEO scores. The provided code includes @media (max-width: 768px) queries configured to optimize for mobile environments.
Q3: Is it important to fix the size and ratio of thumbnail images?
A3: Very important. You need to fix thumbnail sizes or use the object-fit property to prevent CLS (Cumulative Layout Shift) phenomenon where surrounding layouts shift when images load. This is essential for improving web performance metrics and helps ensure visual stability.