[Support request] Page Header add-on, set text & image size in CSS?

[jasper]

Hello,

This may be a repeat of this post, https://generatepress.com/forums/topic/custom-page-header-globally/

but I am not completely sure, so please forgive me for duplication.

The page header add-on works great, but it’s going to be hard to maintain if I set sizing & text info for each page manually. Is there a way to handle this in CSS or functions.php?

The main factor is:
-Image width and height (by the way is there an optimal width?)
-Text size and color
-Padding
-Full-width

and be able to over-ride this on an individual basis on certain pages, preferably using the controls, where perhaps the image chosen does not work well with the text chosen.

Another issue for me is that even though I set the image size to be the same on each page header, the area the page header covers on each page is not consistent. So, when navigating from page to page it’s jumpy and inconsistent.

Hope that makes sense.

Thanks!

[jasper]

Hello – just following up on this question. Thanks!

[Leo]

Hi there,

Sorry not sure how we missed this question!

Hmm there is no easy way to add control like this but you could try using a div and classes inside the page header content, then style them with CSS.

So in page header content, try something like this:
<div class="page-header-global-text-style">Page header content here</div>

Then you can style it with CSS like this:

.page-header-global-text-style {
    font-size: 20px;
    color: #000000;
}

As for the size, it should be the same if all the settings are the same. If not can you provide a link to your site so we can have a look? Thanks!

[jasper]

Thanks for the response.

If I set the page header text quite large, how do I set a smaller one for mobile?

I see what you mean – yes the size of the header area seems to be the same if the settings are all the same, even if the size of the images are different; it just crops it off which is fine.

Is it possible to set a class for header height?

My site requires a password – is there a private area or another way to get credentials to you?

Thanks again.

[Leo]

You can use media query to specify the font size for mobile: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

So something like this:

@media (max-width: 768px) {
    .page-header-global-text-style {
        font-size: 10px;
    }
}

I don’t think setting a fixed header height is a good idea for responsive purposes.

You can send it through Account Issue on this page and just mention the topic: https://generatepress.com/contact/

[jasper]

Thanks – that worked.

For responsive purposes, do you recommend then not using the setting for
“Resize image” (Enable)?

[Leo]

You can still use that. Just note that background images are not responsive by nature so it would get cut off regardless.

Sometimes this CSS would help if the focus of the image is in the center:

.generate-content-header {
    background-position: center center;
}

[jasper]

Thanks. One thing I did notice is that if I use the resize setting and it is also set to parallax, when you look on a mobile device, it shows a small strip of the image in duplicate below the main image (hope that makes sense).
Thanks again!

[Leo]

Hmm can’t picture it..Can you provide a link to your site or a screenshot maybe?

[Author]

Posts