How to Responsively Increase the Width of Your Webpage Content Area

So in this tutorial I will be showing you how to increase the width of the content area of your webpage without breaking your website’s responsiveness. The code that I have left at the bottom of this page specifically works for the Colorlib Sparkling theme, however you can easily adjust it so that it works with your own custom theme.

What’s @media?

First, let me explain how the code works. First, the selector starts with the @media rule that is used in CSS to define different styles rules for the multitudes of different screen sizes of electronic devices. After that comes the (min-width: 1400px) parameters that assigns the minimum width the size of the screen must be in order for the @media rule to trigger.

If the @media rule is triggered, then the declaration body or block comes into affect. The declaration body is the code in between the {} curly brackets.

Where do I find the selector for my Website content area?

So within the first curly brackets you want to add the selector that represents the content area of your website. For the Sparkling theme, that would be .container . If you have a different WordPress theme, then what you can do is right-click the content area of one of your website’s webpages and select Inspect Element or your browser’s equivalent. Hover your mouse cursor up or down the lines of code until the main content area of your webpage is highlighted; this line of code is usually near the top.

Then all you have to do is take the selector from the line of code that corresponds to the highlighted main content area. There are two ways to find the selector.

1. Notice in the image above the line of code that is selected: <div class=”container main-content-area”> . There are actually two selectors you can take from the class=”…” . They are container and main-content-area . Usually the first selector is what you looking for.
2. Alternatively, look at the rules for the selected line of code. If a selector’s declaration body mentions different pixel widths (in order to responsively change content area size depending on device screen size), then you want to choose that selector.

What goes in the declaration body of .container?

So within the declaration body of .container or the equivalent selector for your website’s main content area, you want assign a width that is slightly smaller than @media’s min-width paramter

For example, if min-width is 1400px, you want to assign .container {width:1300px;} .

Finally, .main-content-inner.col-sm-12.col-md-8 refers to the content area, whereas #secondary.widget-area.col-sm-12.col-md-4 refers to the sidebar area. I believe they have something to do with bootstrap, if you want to investigate.

@media (min-width: 1400px) {
	.container {
		width: 1300px;
	}
	
	.main-content-inner.col-sm-12.col-md-8 {
		width: 71%;
	}
	
	#secondary.widget-area.col-sm-12.col-md-4 {
		width: 29%;
	}
}

@media (min-width: 1500px) {
	.container {
		width: 1400px;
	}
	
	.main-content-inner.col-sm-12.col-md-8 {
		width: 73%;
	}
	
	#secondary.widget-area.col-sm-12.col-md-4 {
		width: 27%;
	}
}

@media (min-width: 1600px) {
	.container {
		width: 1500px;
	}
	
	.main-content-inner.col-sm-12.col-md-8 {
		width: 75%;
	}
	
	#secondary.widget-area.col-sm-12.col-md-4 {
		width: 25%;
	}
}