[Resolved] How to Make Header Full Width?

[Nicole]

Under Customize > Layout > Header, Header Width is set to full, and Header Padding is all set to 0. The padding has been removed from the top and bottom of the header image, but there still appears to be abouta a 1″ border/padding on the right and left of the image. How do I make that go away? I want the image to be full length across the screen.

[David]

Hi there,

any chance you can temporarily take down the coming soon page so we can take a look?

[Leo]

Hi there,

Your site is under coming soon page.

Can you disable it so I can see the problem?

[Nicole]

I’m not done creating my site yet, and from past experience with other sites, if I take down coming soon page, Google will crawl my site as it currently is, and it takes forever for Google to re-crawl it with the current information once I DO finish creating my page.

Is there any way of you answering the question without seeing the page? There is a vertical line of white space on both sides of the header image, but the padding of zero IS working for the top and bottom of the picture.

[Leo]

Hmm it’s tough without seeing as we know the options work.

Is the header image wide enough to fill the entire header space?

That’s the only thing I can think of.

[Nicole]

The image is 1504 pixels x 1004 pixels. I understand if it was wider it would probably fill the whole page. I guess I’m just surprised that the width of the page doesn’t auto-adjust to the width of the header, thus allowing the header to be full-width. I’ll try chopping off some of the height of the photo to see if that helps though.

[Leo]

Having the width of the page auto-adjust to the width of the header would be very inconvenient for people who don’t want to use that option.

Let us know if you need another look 🙂

[Nicole]

I tried using the “crop image” for the header photo, just to see if my image being too tall was the problem, but it’s not. What settings would I need to check if this is still happening. To clarify, there is no padding on the top and bottom (which is what I want), but there is what looks like thick white padding on the left and right side of the image. Again, all paddding is set to 0, and header is set to full, so I’m really not sure what I’m doing wrong here. I want the image to be full width from left to right.

[Nicole]

Maybe I’m calling it the wrong thing. By header image I mean the LOGO. I’m not sure if that is a separate term from ‘header image.’

[Leo]

Unfortunately I would need to see the site to tell.

Maybe you can provide admin access through Account Issue here?
https://generatepress.com/contact/

Be sure to mention this topic.

Thanks!

[Nicole]

All I want is a full page header image. That’s all I’m asking for. Is there a way to do that on Generatepress, or no? Do I require a plugin? CSS perhaps?

[Tom]

There are a few ways to do it, it just depends on how the header was set up.

If you’re using the logo option, you could try this CSS:

.site-logo img {
    width: 100%;
}

If that doesn’t work, can you show us a screenshot of what it looks like?

Let me know 🙂

[Nicole]

See the white “padding” around the outside? I’ve even tried changing the width and height ratios. Nothing helps. Note, this is a site logo, not a background image.

View post on imgur.com

[Tom]

Did my CSS above not work? It looks like it should.

[Nicole]

To clarify, should I be doing this?: customizer > additional CSS > post your CSS in the box and hit publish

I did this and it doesn’t work, no.

[Author]

Posts