[Resolved] Header image doesn't show up anymore

[George]

Yesterday I was uploading a Header image in Appearance-Customize-Background Images-Header, and it worked fine. Today I played with some new headers, but now suddenly the header images don’t show up anymore. I tried uploading several times, and the image seems to be there since there is the “remove” link next to the “upload” button, but nothing shows up either in the preview or in the actual saved version. What could be the cause for that?

[Tom]

Any chance you can link me to the site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

It’s just a test site where I am trying to get things set up:
http://thaihealingmassage.com/test/

Do you need the login or is this all you need?

[Tom]

You don’t have anything in your header, so it has no height.

It looks like you might want to upload your header in “Customize > Site Identity > Logo” instead of as a background image.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

I did that, and now it shows up. However it does not show correctly:
http://thaihealingmassage.com/test

It does not cover the entire page width although the header image has the exact same width as the site width as specified in the layout container. On the right side the background color shows, and on the left side of the image their is some duplication of parts of the image as if two images are overlayed on top of each other.

Strangely the background image worked perfectly yesterday, and today the upload as a background image is not working at all.

[Tom]

Add this CSS:

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

Also be sure to remove the background image.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

When I opened my Simple CSS box, I found that there is some CSS in there. I don’t remember why it is in there. Maybe you had given it to me previously for another reason, but I don’t know if it is needed and if it can conflict with the CSS which you just gave me today:

@media (min-width:769px) {
.site-branding {
display: inline-block;
}

.site-logo {
float: center;
margin-right: 20px;
}
}

[Tom]

Hmm, none of that should be necessary.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

So I removed the unnecessary CSS and uploaded the header as a logo, as you suggested. The logo is 1100px wide, and the site container is set to 1100px. Even when I add the CSS which you gave me above, there is still a good amount of margin showing on both sides of the header. The CSS did not change anything, so I left it out. I got around this by applying the same color to the header background as the header image color. But I don’t understand why I had to fill in the color on both sides of the header. Why does it not cover the entire width if it has the same pixel width as the container?

the other issue which I am having is that I want to get rid of the HOME title on the home page. However none of the “Disable Elements” items are working. If I tick any boxes, nothing happens. Why is that? Here is the url again:
http://thaihealingmassage.com/test

[Tom]

As you said, the container is set to 1100px – the width of the browser/viewport is much larger than that.

If you set your header to contained, then it would be set to 1100px, but it’s set to full width so it spans the entire width of your screen.

Stretching the image is possible, but you’ll lose quality. What you’re done is the best method by far.

As for the disable elements not working, that’s strange. Do the checkboxes stay checked when you save?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

What I found out is that none of the disable elements work when I preview the page. However when I actually save the page, they do work as they are supposed to. So the problem was with the preview mode which led me to believe that those functions do not work.

[Tom]

Ah, thanks for the info. I’ll look into that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

What exactly does it mean if, for example the option for H2 in the typography section, it says “inherit”? What is inherited?

Also I see that the Google fonts are available in the customizer on a global basis. Is there a way to have Google fonts available from within the wordpress editor so that I could change just one headline to a Google font, for example?

[Tom]

Inherit will inherit the font family from higher up in the hierarchy.

The body is the highest up it goes.

That’s not possible with the options in the Customizer, and it’s not really recommended. Only 1 or 2 Google Fonts should be loaded site-wide for performance reasons. The more fonts being called, the longer the request to Google will take.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Get it, thanks. One more question: If I use sections on a full width page with no sidebars, is it possible to insert widgets with optin forms into a section? Or what is the best way to display an optin form on a page which is built with sections but without sidebars?

If I understand this correctly, once I choose sections, the entire page has to be built with sections, is that right?

[Author]

Posts