Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a responsive blog layout with CSS?
A responsive blog layout consists of a header with logo and navigation, main content area, and footer. The layout adapts to different screen sizes using CSS media queries and flexible design principles. Let's build a complete responsive blog layout step by step.
Syntax
/* Basic responsive blog structure */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
/* Mobile styles */
}
Example: Complete Responsive Blog Layout
The following example creates a fully responsive blog layout with header, navigation, content area, and footer −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Blog Layout</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
/* Header Styles */
.header {
background: #2c3e50;
color: white;
padding: 1rem 0;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
}
.site-title {
font-size: 1.2rem;
font-weight: normal;
}
/* Navigation Styles */
nav {
background: #34495e;
padding: 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links a {
display: block;
color: #ecf0f1;
text-decoration: none;
padding: 1rem 1.5rem;
transition: background 0.3s;
}
.nav-links a:hover,
.nav-links a.active {
background: #2c3e50;
}
/* Main Content */
.main-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
min-height: calc(100vh - 200px);
}
.blog-content {
background: white;
}
.post {
background: #f8f9fa;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.post-header h1 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.8rem;
}
.post-meta {
color: #7f8c8d;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.post-content {
line-height: 1.8;
}
/* Sidebar */
.sidebar {
background: #ecf0f1;
padding: 2rem;
border-radius: 8px;
height: fit-content;
}
.sidebar h3 {
color: #2c3e50;
margin-bottom: 1rem;
}
.sidebar ul {
list-style: none;
}
.sidebar li {
padding: 0.5rem 0;
border-bottom: 1px solid #bdc3c7;
}
.sidebar a {
color: #34495e;
text-decoration: none;
}
.sidebar a:hover {
color: #2c3e50;
}
/* Footer */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 2rem;
}
/* Mobile Menu Toggle */
.menu-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
.menu-toggle {
display: block;
position: absolute;
right: 20px;
top: 1rem;
}
.nav-links {
flex-direction: column;
display: none;
}
.nav-links.active {
display: flex;
}
.main-container {
grid-template-columns: 1fr;
margin: 1rem auto;
}
.post {
padding: 1.5rem;
}
.post-header h1 {
font-size: 1.5rem;
}
.sidebar {
order: -1;
margin-bottom: 1rem;
}
}
@media screen and (max-width: 480px) {
.header-content,
.nav-container,
.main-container {
padding: 0 10px;
}
.post {
padding: 1rem;
}
.logo {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">BlogLogo</div>
<div class="site-title">My Responsive Blog</div>
<button class="menu-toggle">?</button>
</div>
</header>
<nav>
<div class="nav-container">
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="main-container">
<main class="blog-content">
<article class="post">
<header class="post-header">
<h1>Creating Responsive Web Layouts</h1>
<div class="post-meta">Published on December 15, 2024 by Admin</div>
</header>
<div class="post-content">
<p>Responsive web design ensures that your website looks great on all devices. This approach uses flexible grids, images, and CSS media queries to create layouts that adapt to different screen sizes.</p>
<p>Modern CSS techniques like Flexbox and Grid make it easier to create responsive layouts without complex calculations or framework dependencies.</p>
</div>
</article>
<article class="post">
<header class="post-header">
<h1>CSS Grid vs Flexbox</h1>
<div class="post-meta">Published on December 10, 2024 by Admin</div>
</header>
<div class="post-content">
<p>Both CSS Grid and Flexbox are powerful layout systems. Grid excels at two-dimensional layouts, while Flexbox is perfect for one-dimensional arrangements.</p>
</div>
</article>
</main>
<aside class="sidebar">
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Getting Started with CSS</a></li>
<li><a href="#">JavaScript ES6 Features</a></li>
<li><a href="#">HTML5 Semantic Elements</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</aside>
</div>
<footer>
<p>© 2024 My Responsive Blog. All rights reserved.</p>
</footer>
</body>
</html>
A complete responsive blog layout appears with a dark blue header containing logo and site title, navigation menu with hover effects, two-column layout with main content and sidebar on desktop that stacks vertically on mobile, and a matching footer. The layout automatically adapts to different screen sizes.
Key Features
- CSS Grid: Creates responsive two-column layout that becomes single-column on mobile
- Flexbox: Handles header alignment and navigation menu layout
- Media Queries: Defines breakpoints at 768px and 480px for responsive behavior
- Mobile-First: Navigation collapses to hamburger menu on small screens
- Flexible Typography: Font sizes and spacing adjust based on screen size
Conclusion
This responsive blog layout uses modern CSS techniques like Grid and Flexbox combined with media queries to create a professional, adaptive design. The layout provides excellent user experience across all device sizes while maintaining clean, semantic HTML structure.
Updated on: 2026-03-15T15:18:07+05:30
1K+ Views
Advertisements