3 Post Layouts With Different Background Widths

Post Layouts

I like to have variety in my post layouts and always try to make them interesting. I know many in the industry believe that simple and boring is the best approach to web page layouts.

But If you like mixing things around, then in this post we will make 3 different layouts with the minimum CSS possible.

Three Layouts:

  • No or global background
  • Background stretching till the container
  • Full-width Background

We will start with the basic CSS for the design. Of course, you will need other CSS to style other parts of your website but there we will just focus on container and background.

We will be using var() function as it makes managing the changes easier.

html {overflow-x: hidden;}
:root {
	--width:100vw;
	--padding:20px;
}
@media (min-width:544px) {
	:root {
	--padding:32px;
}
}
@media (min-width:786px) {
	:root {
	--width:760px;
}
}
@media (min-width:940px) {
	:root {
	--width:880px;
	--padding:42px;
}
}
@media (min-width:1200px) {
	:root {
	--padding:56px;
}
}
.container {max-width:var(--width);margin:;padding:var(--padding);}
.content-background {background:#fff;}

No or global background

<div class="container content-background">
<p>Any random text here.</p>
<p>I will talk about my self then.</p>
<p>I do Web development profesionaly.</p>
<p>You will find me playing football or in the Gym when now working.</p>
</div>

Background Stretching till the Container

Now I want that need section of my post should have background stretching till the container. Then we need to add this CSS.

.b-cont{margin: 0 calc(-1 * var(--padding));padding: var(--padding);}

HTML of the text.

<div class="container content-background">
<div class="b-cont">
<p>Any random text here.</p>
<p>I will talk about my self then.</p>
<p>I do Web development profesionaly.</p>
<p>You will find me playing football or in the Gym when now working.</p>
</div>
</div>

Full-Width Background

If background needs to be covering the full width of the screen then we need to add following CSS

.b-full {margin: 0 calc(-1*(50vw - var(--width)/2 + var(--padding)));padding:var(--padding) calc(50vw - var(--width)/2 + var(--padding));}

HTML of the text.

<div class="container content-background">
<div class="b-full">
<p>Any random text here.</p>
<p>I will talk about my self then.</p>
<p>I do Web development profesionaly.</p>
<p>You will find me playing football or in the Gym when now working.</p>
</div>
</div>

Leave a Reply

Let's Work Together

Have a project in mind?

Gaurav Yadav

Web Designer & Developer

Best Website Development Company in Gurugram and Delhi/NCR

Contact Us

579, Sector 27
Gurugram, Haryana

Mob: 9873396676

contact@yadavgaurav.com

Gaurav Yadav © 2020 All Rights Reserved