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

[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

[wade]

a small note :

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

Generate press – working site

[David]

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 */
}

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

[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.

[David]

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.

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

[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

[David]

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.

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

[Author]

Posts