[Support request] Elements – Page hero – Background image size becomes fluid based on post title

Home Forums Support [Support request] Elements – Page hero – Background image size becomes fluid based on post title

Home Forums Support Elements – Page hero – Background image size becomes fluid based on post title

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #665813
    wade

    Hi guys,

    I have been using the elements module to design my page header for single posts .
    i chose to use the featured image as the background image along with the post title and date fields to be displayed inside them . please refer the website link that i have sent.

    the problem i face is , when the post-title word count is more – around 10-12 words, the background image size increases accordingly to accommodate them , but this causes an inconsistency in the background image size for posts that have a title with lesser word count.

    is there a way to lock down the background image size so that it remains consistent across all posts with enough space to accommodate post titles .

    Note : i have made two posts to illustrate the issue.

    GP Premium 1.7.2
    #665814
    wade

    a small note :

    the below image is the settings that i have used for the page hero

    Generate press – working site

    #665845
    David
    Staff
    Customer Support

    Hi there,

    you could fix the height of the page hero, although this can cause problems if the content is larger than that. To cover 80% of the bases use min-height. So give that hero a class: e.g hero-min-height

    And add this CSS:

    .hero-min-height {
        min-height: 600px; /* adjust to suit tallest hero */
    }
    #665949
    wade

    Hi David,

    i tried that solution , but it doesn’t seem to work.

    the issue is , for a post with longer title ,the title appears in two lines and the background image automatically increases its size to accommodate it.

    #666025
    David
    Staff
    Customer Support

    Hi there,

    couple of things to try, remove or reduce the left / right padding, so less wrap occurs. And then switch the top / bottom padding to %’s – start with say 15% on each and tweak accordingly.

    #701065
    andriansah

    Hi David, can you help how to add the css in element?

    What I can achieve now is in header elements
    1. I use background image
    2. padding top & bottom i set 20%

    Not all the image showing, there are some section that already cut. my question is
    1. what is the size for image in section?
    2. how can I set the height fix, like 500 px and the width 100%

    Thank you

    #701664
    David
    Staff
    Customer Support

    Hi there,

    can you raise a new Topic where you can share a URL to your site. It allows us to keep better track of support topics.

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