Learn how to create a responsive blog layout with CSS.
Learn how to create a responsive blog layout that varies between two and full-width columns depending on screen width.
Resize the browser window to see the responsive effect:
Blog NameTITLE HEADINGTitle description, Dec 7, 2017ImageSome text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADINGTitle description, Sep 2, 2017ImageSome text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
About MeImageSome text about me in culpa qui officia deserunt mollit anim..
Popular PostImage
Image
ImageFollow MeSome text..
Footer
How To Create a Blog Layout
Step 1) Add HTML:
Example
<div class=”header”>
<h2>Blog Name</h2>
</div>
<div class=”row”>
<div class=”leftcolumn”>
<div class=”card”>
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class=”fakeimg”style=”height:200px;”>Image</div>
<p>Some text..</p>
</div>
<div class=”card”>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class=”fakeimg”style=”height:200px;”>Image</div>
<p>Some text..</p>
</div>
</div>
<div class=”rightcolumn”>
<div class=”card”>
<h2>About Me</h2>
<div class=”fakeimg”style=”height:100px;”>Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class=”card”>
<h3>Popular Post</h3>
<divclass=”fakeimg”>Image</div><br>
<divclass=”fakeimg”>Image</div><br>
<divclass=”fakeimg”>Image</div>
</div>
<div class=”card”>
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class=”footer”>
<h2>Footer</h2>
</div>
<h2>Blog Name</h2>
</div>
<div class=”row”>
<div class=”leftcolumn”>
<div class=”card”>
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class=”fakeimg”style=”height:200px;”>Image</div>
<p>Some text..</p>
</div>
<div class=”card”>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class=”fakeimg”style=”height:200px;”>Image</div>
<p>Some text..</p>
</div>
</div>
<div class=”rightcolumn”>
<div class=”card”>
<h2>About Me</h2>
<div class=”fakeimg”style=”height:100px;”>Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class=”card”>
<h3>Popular Post</h3>
<divclass=”fakeimg”>Image</div><br>
<divclass=”fakeimg”>Image</div><br>
<divclass=”fakeimg”>Image</div>
</div>
<div class=”card”>
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class=”footer”>
<h2>Footer</h2>
</div>
Step 2) Add CSS:
Example
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;}
/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;}
/* Responsive layout – when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}}
font-family: Arial;
padding: 20px;
background: #f1f1f1;}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;}
/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;}
/* Responsive layout – when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}}
Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.
Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.
❮ Previous Next ❯
Be the first to comment