Trying to put Page in full width

Your theme is using bootstrap, and personally I think that’s great because I love bootstrap but by default .column has property max-width: 1200px. It seems like if we shrink the screen your site is full-width if you go under 1200px so that’s the only thing blocking it. Combined with margin-right: auto; margin-left: auto; your .column wrapper is constraining to 1200px max.

Sidenote: for some reason your .container div is inside .col-md-12 which is backwards, the correct order is .container > .row > .col-md-12 (see the Bootstrap docs for grid usage for examples). This is not exactly causing the width issue though, but it could cause other problems.

Once you get the bootstrap order fixed, target the specific .container div and try overwriting that max-width property with 100%:

`
#website_boxed .container {
max-width: 100%;
}
`

That or some variation should work, if you don’t have the element #website_boxed on other pages you could probably use one of the body classes… I’m not sure if you’re trying to selectively target it or alter is everywhere. I’d avoid targeting .container globally because you want to be able to use that for nested grid layouts, and there may even be plugins or other parts of your theme that use it already.

• This reply was modified 8 years, 10 months ago by goldhat.

Bootstrap is a separate stylesheet, but you can add .column to your custom stylesheet. It’s usually better not to override the actual style.css in a base theme, but if you don’t have a child theme just keep those custom styles organized. The thing is if you change the base theme, any updates to the theme later will overwrite your changes.