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

Home Forums Support Page Header add-on, set text & image size in CSS?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #319164
    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!

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #326744
    jasper

    Hello – just following up on this question. Thanks!

    #326770
    Leo
    Staff
    Customer Support

    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!

    #326817
    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.

    #326819
    Leo
    Staff
    Customer Support

    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/

    #326826
    jasper

    Thanks – that worked.

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

    #326868
    Leo
    Staff
    Customer Support

    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;
    }
    #327183
    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!

    #327217
    Leo
    Staff
    Customer Support

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.