[Resolved] Image alignment in Widget Header

[Carlos Paramio]

Hi Tom,
I’ve put a 2600×459 image as header through Widgets>Header but it shows to the right and only half way across the page, thought site is set as 1280px width in Customizer.

I’ve done a search in the forum and have added this CSS:

.header-widget {
    float: none;
    max-width: 100%;
}

Now the image fills the entire space in header but there’s still some margin to the left and to the right of the screen. I’ve tried adjusting margin and padding with no effect.

Thank you

[Carlos Paramio]

I’ve realized the space at sides appears because the difference between container width and screen resolution (1280px vs. 1366px)

There’s still a small gap between header and navbar

[Tom]

Why not just upload it as a header through the “Header Content” area of the Customizer?

If you need to use the header widget for some reason, can you link me to the site so I can see the gaps?

Thanks!

[Carlos Paramio]

Oh man, I have designed like a million of headers in the past 2 months

But none of them have won my boss heart, so to speak

In the past you kindly helped me with a logo floating above the background image but it was not well received, then I tried a lot of things, until I added the image through Header Content.

It looks right for him (hurray!), but image gets the container width set in Customizer, so when you’re browsing the site in a wider screen there’s some blank gaps left and right.

In short: Is there any way to make the image (through Header Content) to expand throughout the screen, the same way menu does?
(Customizer>Design>Header Desing doesn’t behavoir like Customizer>Design>Nav. Design ??)

Excuse me for sharing my headaches with you

[Carlos Paramio]

oh, and http://www.unedtalavera.es

remember you need to login to browse the site

[Tom]

This CSS should do the trick:

.inside-header.grid-container {
    max-width: 100%;
}

.inside-header.grid-container img {
    width: 100%;
}

[Carlos Paramio]

Good morning
What a simple solution for my big problem!

Are both lines necessary? It seems to work with just first one (the header it’s just a JPG file, nothing more finally)

Thank you Tom

[Tom]

The second line forces the image to be 100% width of your browser.

Glad I could help 🙂

[Carlos Paramio]

Tom, I’m terribly sorry to open this one again
I’ve deleted all the images used for testing, and have started creating a new header

So I’ve uploaded a 1085×200 JPG image through Header Content/Logo and it doesn’t fill the entire width of the navbar (1280px).
both lines of CSS are there but it doesn’t work today… 🙁

[Tom]

This part of the code will force the image to be 100% of the container:

.inside-header.grid-container img {
    width: 100%;
}

If that’s not working, I’ll need to take another look at the site to check out the added CSS.

[Carlos Paramio]

Yes, please come in and take a look
http://www.unedtalavera.es

[Tom]

Ah okay – this is the full working CSS:

.inside-header.grid-container {
    max-width: 100%;
}

.inside-header.grid-container img {
    width: 100%;
}

.site-logo {
    display: block;
}

[Carlos Paramio]

Thank you, this new CSS works perfectly!

[Tom]

Awesome 🙂

[zahed]

Dear ,

Please look in to my site. i want to show my site logo and header widget on the same vertical alignment. but it is up and down

please help

[Author]

Posts