White Space on Right side of Twentyfouteen Theme

Hi Askar51,

I was trying to solve the problem and I ended up with this:

background-color: #000 – it was white
max-width: none – it was 1260px

When I set just max-width: none all spreads correctly except header picture and menu

I was trying to spread it also, but it is kind of hard to get it.
No success to position the picture without destroying the layouts.
Header pix is 1260px wide.

So I decided to change the background colour and hope this will work for you.

.site {
    background-color: #000;
    max-width: none;
}

Cheers
TR

When I set just max-width: all spreaded correctly except header picture and menu

Hello,

You can try this in your Custom CSS for achieving that:

#site-header img {
    max-width: 1350px;
    width: 100%;
}
.site-header {
    max-width: 1350px;
}
.site {
    max-width: 1350px;
}

Hope that helps you, feel free to ask if there is any other problem.

Thank you.

It did not work, this is my current style.css file

/*
 Theme Name:   TwentyFourteen Child
 Theme URI:    GoatManMike.com
 Description:  Twenty Fourteen Child Theme
 Author:       Mike Speer
 Template:     twentyfourteen
 Version:      1.0
*/
@import url('../twentyfourteen/style.css');

.site {
    background-color: #000;
    max-width: none;
}

#site-header img {
    max-width: 1350px;
    width: 100%;
}
.site-header {
    max-width: 1350px;
}
.site {
    max-width: 1350px;
}

It fixed the body but not my header image, I am playing with it now to try and fix it. Let me know if you find something

Hello,

It all fixed, if you are not able to see the change Please clear you browser cache to see the change.

Thank you.

Sam,
Sorry but It does not fix my issue, if you view my website on a larger screen the header image is still not stretched to the extents of the window as the body of my page is.
You can see this by zooming in and out of my website, the body of the site auto adjusts (as it should) The header image does not. So on all larger monitors the header image is offset to the left with a big black space on the right. Let me know if anyone has suggestions, thanks!

I see your css file.
You cannot have same classes with different values.

.site {
    background-color: #000;
    max-width: none;
}

OR !!!!!!!!!

.site {
    max-width: 1350px;
}

OR !!!!

`#site-header img {
max-width: 1350px;
width: 100%;
}

OR !!!!!!

.site-header {
max-width: 1350px;
}

use one class just once !!!

It does not solve your header image, but your style.css file is clean.
And last rule come as the one which is implemented. rest of it is wasted sources,

I will take a closer look to your header.
Im not at home and have just MacBookPro with me.
Need to be home on large desktop.

Cheers
TR

#site-header img {
max-width: 1350px;
width: 100%;
}

OR !!!!!!

.site-header {
max-width: 1350px;
}

#site-header is for the header image area, and .site-header is for the top menu bar. The OP also could have used #masthead to target the top menu bar.

Can you clarify what the problem is, now? The reason your header image doesn’t spread out across the entire width of the page is because you’ve set a max-width on the image itself:

#site-header img {
    max-width: 1350px;
    width: 100%;
}

If you removed the max-width, your header image would spread out to cover the entire width of the page.

Man really getting pulled in a few directions here. . .
My Issue: The Top Menu Bar and Header Image do not stretch to the extents of the window as the body does when you either zoom out or have a large monitor. I would like the header image to stretch to the window extents.

this is my style.css file as of this moment, all suggestions are welcome

‘@import url(‘../twentyfourteen/style.css’);
.site-header {
max-width: none;
width: 100%;
}
#site-header img {
max-width: none;
width: 100%;
}
.site {
max-width: none;
width: 100%;
background-color: #000;
}’

That code should work, but I don’t see it in your child theme’s stylesheet. Are you using a caching plugin or is your host caching your site?

I am not quite sure what you mean, I am using FileZilla to upload my files to my site.
The style.css code is above as typed.

Were there any errors when you uploaded the files to your site? As of 11:48pm, Mountain time, I still see the old code in your child theme’s stylesheet:

.site {
    background-color: #000;
    max-width: none;
}

#site-header img {
    max-width: 1350px;
    width: 100%;
}
.site-header {
    max-width: 1350px;
}
.site {
    max-width: none;
}

Hi Askari51

I came up with this solution:

#site-header img {
    max-width: none;
    width: 100%;
}

OR

#site-header img {
    max-width: none!important;
    width: 100%;
}

It worked out with my inspector.

So your child them style.css should consist just this !!!!!!!!:

.site {
    background-color: #000;
    max-width: none;
}

#site-header img {
    max-width: none;
    width: 100%;
}

OR

.site {
background-color: #000;
max-width: none;
}

#site-header img {
max-width: none!important;
width: 100%;
}`

Delete rest of it.

Hope this will work
Cheers
TR