Archived topic
Hero image size
22 replies · Started by ken on November 6, 2020
Hi,
I am trying to size my hero image such that it's responsive for all sizes > 1024px. My image size is 1920px*307px, the width is corretly displayed from 2000px but from ~1520px it starts to be reduced. From the various posts that I read and testing myself I think it might have something to do with the height? Padding? How do i set them correctly? I want the image to be full width throughout all the screen sizes.
If it helps to look at the site, feel free.
Thanks!
Hi there,
Sorry, which image are you referring to here?
The big image on the front page?
sorry, i am refering to the hero/banner image (with the word about on it) in this page .
Hi there,
edit the Header Element, change the top padding to 15%
Then set the background position to Center Center
15% is the aspect ratio of the original image.
ie.
210px (H) / 1324px (W) * 100 = 15%
Hi there,
I am not sure what happened but I couldn't see the element anymore. When i first changed the settings in header as you mentioned, i see that the sides (with pink color) disappeared and then i adjusted the padding to 10% instead of 15%. After that I couldn't see my hero image anymore.
Can you tell me what happened?
Hi,
I am not sure what happened but I couldn’t see the element anymore. When i first changed the settings in header as you mentioned, i see that the sides (with pink color) disappeared and then i adjusted the padding to 10% instead of 15%. After that I couldn’t see my hero image anymore.
Can you tell me what happened?
I don't see any <div class="page-hero">(Header Element) in your page.
Perhaps you've changed the Display Rule location or accidentally trashed it?
Can you verify? Thanks.
Hi Elvin,
I checked the Display Rule location and it's set to page and the foundation (which is the name of that page).
Do you have any other Header Elements ?
Hi David,
No.
Does the Header Element contain any content ?
If it doesn't then add a HTML Comment like so:
<!-- page hero -->
This won't display on the frontend but will force the hero to be displayed.
It's working now. Thanks! However, the image i inserted has pink color on the side, I am not seeing them anymore. Could you advice on how to scale it such a way that the whole inserted picture in shown?
Thanks!
Remove the bottom padding. So you only have 15% top padding.
it works thanks!
Hi David,
I applied the same thing to the other pages but the header isn't showing up for some reason, can you help?
Did you resolve this? I am see Header Elements on most of the site now.
