Archived topic

Image alignment in Widget Header

15 replies · Started by Carlos Paramio on March 12, 2015

Viewing posts 1–15 of 16

March 12, 2015 at 1:52 am #85629

Hi Tom,
I've put a 2600x459 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

March 12, 2015 at 8:35 am #85771

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

March 12, 2015 at 9:22 am #85801

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!

March 12, 2015 at 12:35 pm #85889

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

March 12, 2015 at 12:36 pm #85891

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

remember you need to login to browse the site

March 12, 2015 at 11:02 pm #86003

This CSS should do the trick:

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

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

March 13, 2015 at 1:38 am #86078

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

March 13, 2015 at 9:12 am #86347

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

Glad I could help :)

March 19, 2015 at 8:28 am #88690

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 1085x200 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... :(

March 19, 2015 at 1:07 pm #88827

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.

March 20, 2015 at 12:33 am #88949

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

March 21, 2015 at 12:11 am #89295

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;
}

March 23, 2015 at 8:35 am #90294

Thank you, this new CSS works perfectly!

March 23, 2015 at 10:56 am #90360

Awesome :)

June 12, 2015 at 6:17 pm #114236

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

This archived topic is closed to new replies.

Start building better websites today.