Archived topic
Elements - Page hero - Background image size becomes fluid based on post title
6 replies · Started by wade on September 1, 2018
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.
a small note :
the below image is the settings that i have used for the page hero
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 */
}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.
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.
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
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.
