Expanding page content width

Hey @alleymuir,

Please post a link to your site. Thanks!

https://swcd.org/

I was able to do it, but not I’m trying to remember how I did it and can’t!

First off, you’ll want to find the width of the entire layout, so you need to identify that container. On the layout I am currently using, that container has an ID of wrapper – which is a pretty common name and might very well be what your theme uses as well.

Using Firebug, I am able to determine that the width of my wrapper element is 960 pixels, so I want to make my content area fill that space.

The next thing I’m going to do is identify the width of my content column. In my current layout that is contained within an element called content (also a common practice). The current width is 550pixels, so I need to increase that to 960.

Something to keep in mind here is that my current layout doesn’t require any margins, padding, or borders on it’s content area. Your theme could be different, and if so you need to factor in those values.

Remember, if you select your content element in the left hand column of Firebug, you’ll be able to see the padding (purple) and margins (yellow) highlighted on the page.

If your content area has padding/margins, you need to know what they are, and subtract the total value (the sum of both sides!) from your final width.

Here’s an example for you. We already know my wrapper area is 960 pixels across, and my content is 550 pixels. If my content had a 10 pixel margin on each side, I’d want to change my width to 940 pixels (960-10(left)-10(right) ).

If parts of that still don’t make sense, I’d definitely recommend reading a little about the CSS Box Model – that will help clarify what you need to allow space for and how margins and padding work.

First, install and activate this plugin: Simple Custom CSS by John Regan

Then, insert the following codes:

#sidebar {
display: none}

.site-main {
width: 100%;
margin: 0;
padding: 0;
float: left;}

after installing and really the plugin while is activated you can use the following codes
#side bar{
display:none;
width:auto;
margin:auto;

}

#site-main{
width:100%;
width :auto;
margin_left:0;
margin_right:0:
padding:0;
float:left;
}

the answers here are all awesome, however i have a different issue, i want to expand the width of just one plugin on a particular page and am finding that to be an issue as the custom css solution provided here seems to work site wide and not on a specific target..

thanks
][coding is divine][

Hi bro
really if you want to expend the content width of one plugin you can procedure like this
the $content_width must be set in the global scope as early as possible. i suggest that this is done at the very top of functions.php outside of any class or function.
<?
example

if ( ! isset( $content_width ) )
$content_width = 640;
?>