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.
- 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.
- 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%; } }
Nice post. Just one question – how do I increase the width of the whole theme to about the same size as your blog? Thanks
I understand that the whole theme of the blog is referring to both the width of the content page, and the width of the sidebar. I’ve already shown you how to change the width of the page. You just do the same with the sidebar. This is the code I plugged into my website:
@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%;}
}
Not all themes are the same. I suggest using Inspect Element to customize your website to the exact way you want it to be.
Hi thank you for the post and video.
I have copied the lines and I still have a problem with the responsively. for example when I look at my site in a cell phone.
my theme is soledad of PenciDesign.
http://pencidesign.com/soledad/soledad-document/
when I’ve ask them to help with increasing the website. the answer was:
Hi,
Please try add more this code to Customize > Custom CSS to do that:
@media only screen and (min-width: 1170px) {
.container { width: 100%; padding-left: 20px; padding-right: 20px; }
}
But, I recommend you shouldn’t do that because it’s not good for big screen desktop.
Best Regards,
PenciDesign
but it didn’t work.
I appreciate your help.