[Resolved] Hero image size

[ken]

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!

[Leo]

Hi there,

Sorry, which image are you referring to here?

The big image on the front page?

[ken]

sorry, i am refering to the hero/banner image (with the word about on it) in this page .

[David]

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%

[ken]

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?

[Elvin]

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.

[ken]

Hi Elvin,

I checked the Display Rule location and it’s set to page and the foundation (which is the name of that page).

[David]

Do you have any other Header Elements ?

[ken]

Hi David,

No.

[David]

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.

[ken]

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!

[David]

Remove the bottom padding. So you only have 15% top padding.

[ken]

it works thanks!

[ken]

Hi David,

I applied the same thing to the other pages but the header isn’t showing up for some reason, can you help?

[David]

Did you resolve this? I am see Header Elements on most of the site now.

[Author]

Posts