How to change width of the page?

Link to site?

here

I have the same problem with header and content on a site using twenty eleven theme. see <https://66.147.244.110/~budorgau/&gt;

I would like to have the header go all the way across the screen as well as being responsive to different devices. The same for the content body size

At the moment the header is set at 1000 px for image width, and there is large padding around it, top and both sides. I have tried to change padding on header about 3 different ways from forum posts but no luck.

Also the page body is parked within a wide frame. Can this be altered? It looks like its on the way-back machine.

I am working without a hierarchy’, straight to server through dashboard so cannot find a way forward to set up a ‘child’ CSS theme. Happy to make changes to parent code if given clean code.

[Note there are other problems with site at moment as no footer is showing but I will check that through another thread.]

best Limestone Jane

Hi LimestoneJane,

You have posted your question in the wrong forum.

Twenty Eleven theme’s forum is here. https://www.ads-software.com/support/theme/twentyeleven

You have to post in the correct forum to get relevant help.

Thanks!

Any update on this please?

2) Try this to start with

.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
    width: 960px;
}

1) How do you want the elements to look Logo-Navbar-Social Icons-Tagline within the shorter width?

Actually i want the header and footer to be 960px also which is not happening. Also, the sidebar got wrapped to bottom on desktop.

Not sure why is it so difficult to change the size of the header! If I manage to change the size then the header shifts to left. If I fix that then the stickiness of the header is gone. Is there really no solution to this?

There is no ‘standard’ solution to this as you’re trying to break the underlying design of the Theme.

Try this for the header (1920px screen):

.sticky-disabled .tc-header {
    width: 960px;
    margin: 0 24%;
}

But you’ll need to use @media to adjust different viewports

Finally! Pasting my css here for anybody who wants a non full width content.

@media (min-width: 1200px) {
.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, footer#footer, .sticky-disabled .tc-header, .sticky-enabled .tc-header {
width: 960px !important;
}
.sticky-disabled .tc-header, .sticky-enabled .tc-header {
left: 50%;
transform: translate(-50%, 0);
}
footer#footer {
margin: 0 auto !important;
}
}

Thanks for all the help.