How to create a responsive blog layout with CSS?
The blog is informational content on any particular subject. The blog post on the webpage is displayed in reverse chronological order so that the latest post appears first. A blog page consists of informational content along with the author description, images, social media buttons, etc.
The blog contents are arranged in some layout. Here, we will learn to create a responsive layout for the blog. It can be done using CSS.
Creating a responsive layout
Use the <div> element as wrapper for the blog contents. Use CSS cards to add the contents of the blog. Add heading, description, and some images. Use another card where we will have a description of an author with some images and social media buttons.
- Use
float to place the card to the left or right of the page.
- Add
padding , background-color, margin to the elements.
- Define the
width of each card.
- Use
clear property to remove the float of cards.
- For a responsive blog use
@media rule and define CSS code within it.
Example: Creating a responsive blog layout with CSS
In this example, we have created a blog layout where the content and author description are inlined horizontally at a large screen but when the screen size is smaller the 700px. The content will be vertically stacked one after another.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Blog heading. Bigger size*/
.header {
text-align: center;
font-size: 35px;
background: white;
padding: 25px;
}
/* Column for the contents */
.column-content {
float: left;
width: 70%;
}
/* column for author */
.column-author {
float: left;
width: 20%;
padding-left: 20px;
}
/* image */
.img {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* card */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the column */
.container:after {
content: "";
display: table;
clear: both;
}
/* Also add some footer */
.footer {
text-align: center;
background: #cccccc;
margin-top: 15px;
padding: 25px;
}
button{
padding: 16px;
width: 70px;
text-align: center;
text-decoration: none;
font-size: 25px;
color: blue;
}
/* The columns are placed vertically for smaller layouts */
@media screen and (max-width: 700px) {
.column-content, .column-author {
width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<div class="header">
<h2>Blog Heading</h2>
</div>
<div class="container">
<div class="column-content">
<div class="card">
<h2>Content Heading</h2>
<h5>About content, Aug 14, 2021</h5>
<div class="img" style="height:200px;">Image</div>
<p>The blog is a informational content on any particular subject. The blog posted in webpage is displayed in reverse chronological order so that latest post appears first. A blog page consists of informational content along with the author description, images , social media buttons etc. The blog contents are arranged in some layout . Here we will learn to create a responsive layout for the blog. It can be done using CSS.</p>
</div>
<div class="card">
<h2>Previous content</h2>
<h5>Title of content, Feb 2, 202</h5>
<div class="img" style="height:200px;">Image</div>
<p>The blog is a informational content on any particular subject. The blog posted in webpage is displayed in reverse chronological order so that latest post appears first. A blog page consists of informational content along with the author description, images , social media buttons etc. The blog contents are arranged in some layout . Here we will learn to create a responsive layout for the blog. It can be done using CSS.</p>
</div>
</div>
<div class="column-author">
<div class="card">
<h2>About Me</h2>
<div class="img" style="height:100px;">Image</div>
<p>I am a content writer writing articles since years. My achievements. My journey.</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="img">Image</div><br>
<div class="img">Image</div><br>
</div>
</div>
</div>
<div class="footer">
<h2>Follow me</h2>
<button> <i class="fa fa-facebook"></i></button>
<button> <i class="fa fa-twitter"></i></button>
<button> <i class="fa fa-linkedin"></i></button>
<p> Copywright@some</p>
</div>
</body>
</html>
Output
Here is the output of the above code.
For large screen
for small screen
Example: Creating a blog layout with CSS
In this example, we have two blogs places horizontally. This will be stacked vertically one after another on the small screen.
Conclusion
In this tutorial, we have learned to create a responsive layout for blogs with CSS. The @media rule can be used to change the layout of the blog at a particular viewport. We can use max-width or min-width of viewport for it.
