[Support request] Issues regarding page headers

[risum]

Hi Generate pressers!

Love your product! I hope anybody has some tips for these issues :O)

1) I am using page headers and I have some issues. The same settings applied to pages, does not affect posts. Any idea what is wrong?

See the difference

A page with a page header:http://kropspotentialet.dk/saadan-hjaelper-jeg-dig/

A post with a page header: http://kropspotentialet.dk/depression-angst-og-ptsd/

I want the image to appear full width (within container) and no top padding

2) I wanted to create a page header with a background image and have som text appear over it. I am missing options for controlling text – like layering or something. And the mobil view is all off. Background image does not scale.

I had to create the text in photoshop as a workaround

See: http://kropspotentialet.dk/

Love from Denmark

– Morten

[Leo]

Hi there,

1. Instead of inserting the image using HTML and if you are not adding any content to it, just simply add it in as Featured Image on the posts/pages: https://docs.generatepress.com/article/adding-featured-images/

2. You’d have to use CSS and target the content. Background images are not responsive by nature so your current way actually work pretty good. Just try using featured image.

Let me know if this helps.

[risum]

Hi Leo

Thanks for responding :o)

1) Featured image in posts act the same way as the page header option. Creates a padding around it and not like when using featured image or page header on pages. This difference in posts and pages is just a design detail that anoys me, but have no actual importance other than it could have been cool to have the same look thoughout the website.

2) Yes the photoshop option looks ok on a computer, but is useless on an ipad or a phone. And ofcourse the h1 text is not recognized by google, so I’ll be on the lookout for a solution somewhere ahead. Maybe using ccs and layers if I can get it to work and be responsive. My lack of skills are unfortunately a challenge ;o)

[Leo]

1) Can you try setting the Single Post Header Location to Above Content Area in Layout > Page Header?

2) You can switch out the background image and reduce the font size specifically for mobile if you’d like?
Let me know if you’d like to go with this method 🙂

[risum]

Hi Leo

1) Ahhh there it was – need new glasses. Great thanks!

2) Yes please, I would like to to with reduced font for mobile option 🙂 How do I bring that about?

[Leo]

The code depends on what kind of fonts you are using.

Can you link me to a page? Currently I only see pictures with texts already photo shopped on it.

[risum]

Hi again

1) I remember now. I had found the option regarding headers in single posts earlier. I dismissed it because left padding on the headline is gone.

2) I have re-made a page header with html, background image and text. http://kropspotentialet.dk/ – body font is open sans and widget font is architects daughter (would be cool to use on page header as well) – both google fonts

[Leo]

Something like this should do to change the text for mobile:

@media (max-width: 768px) {
    .inside-page-header h1 {
        font-size: 10px;
    }
    .inside-page-header h3 {
        font-size: 8px;
    }
    .generate-content-header {
        background-image: url(http://URL-HERE);
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[risum]

You are so patient! :o) Thanks again.

So where to put it? I tried in the user-css section. And on the page itself. It affects the text but not the image.

[Leo]

Added another line in the code above which gives you the option to add the image specifically for mobile.

[risum]

Great thanks 🙂 . I use the simple css plugin – It works fine. Now I would like to change the padding for mobile text and maybe add some more css. Where do I find the classes (naming) to target them correctly? I have searched through style.css for class-names

I would also like to add some css to the footer menu I made. So it appears vertically and not default horizontally. It is more simple css I recon?

[Leo]

I would recommend using inspect element/developer tool in your browser.

Can you open a different topic for questions unrelated to the original topic?

It would be easier for us and other users to search and re-use the answer in the future. Thanks!

[Author]

Posts