the issue you’re going to have is that the width of the main page and all interior widget and page areas are set using media queries. You can change the main page width, but a span12 width at full screen width is still going to want to resolve to the same width. It will require a little customization. You can try to open the child templates bootstrap responsive css file and edit the .container class width from 1170px down to what you want that is bracketed within the @media (min-width:1200px) media query area. similar to below. Alternatively you can insert the following code to your custom css file and change the pixel width to suit your taste.
@media (min-width: 1200px) {
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px !important;
}
}
The problem you might have is that at full screen width some elements/widget areas within the page might stay wide. To fix these you’ll need to edit the .span# classes to fit within the new narrower container you set. Then you may have to edit the .span classes widths across the board until you fix it. These samples are if you just override the bootstrap respnsive css in your custom css and not change the core files. If you change the core files you can but there’s no need for the !important statements.
@media (min-width: 1200px) {
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px !important;
}
.span12 {
width: 1170px !important;
}
.span11 {
width: 1070px !important;
}
.span10 {
width: 970px !important;
}
.span9 {
width: 870px !important;
}
...so on and so forth.
}
You might also need to set the next media query down in size too from
@media (min-width: 768px) and (max-width: 979px) {
to
@media (min-width: 768px) and (max-width: 800px) {
in the core files.
It’s a bit more advanced, so the desire to have a different width has to be strong and for a good reason to bother. In all honesty it shouldn’t matter much. Wider width gives you more room for white space which helps people actually see page elements easier and faster with greater conversion rates as in modern ux ui design.
It could be that by adding the first piece of code at the top, you don’t have any issues. Experimentation sometimes is required. I tried to find a file already customized on the internet to pop in but couldn’t
Best REgards,
Danny ??
