Elements in theme Java

Hi there,

the Background Image is set to Cover which means it will scale to fill the size of its container.
If you want a truly responsive image size and for it to show 100% of the image then you need to:

1. Calculate the % aspect ratio of your Image. ie. Height / Width * 100. In your case thats 359 / 1915 * 100 = 18.7%.
2. Edit the Container Block in the Page Hero and switch the Padding to % and set just the top padding to 18/19% - leave the bottom as 0, and you can also remove the left and right padding.

This will make sure the Container has the same aspect ratio as the Image.

Hi,

Thank you - didn't help. https://tarhurinpapu-fi.hel8.wp-cloud.dev/tuotekortti/
Quite difficult...

Ignore #2 above as just noticed its a Header Element:

https://docs.generatepress.com/article/header-element-overview/#page-hero

In the padding fields leave all of them empty. Except for the Top, which you add 19 to and select % from the unit selector.

Thank you again. I have a completely different view in the page hero's settings than you have in that link. Where is the unit selector?

I am also confused because I have similar page hero on this site https://fermfoods.fi/bean-better/ and there was no problem with them. Even if I do just like these, the page hero background picture gets bigger.

If I upload the image in the container as an image, it's otherwise good but doesn't fill the entire header area.
Why aren't updates showing up right away? They have a delay. It adds to the confusion in this matter.

My bad... having one of those days i think.
Why not do this.
1. Edit your Bean Better site.
1.1 Edit the Block Element that is working.
1.2 Select Code editor form the 3 dot Menu, and then copy all the code in the editor.

2. Now edit your other site ( with the issue ),
2.1 edit is Block Element, delete the current content.
2.2 switch to code view, and paste in the copy from your Bean Better site.

This will mean you have the exact same block layout on both sites. And you just need to switch the Background Image.
If the image on the problem site is the same aspect ratio as the bean better site then you will get the same result.

Hi,
Unfortunately nothing works out. This is very frustrating and desperate. When I copy the code, paste it into the code editor, and update, the code does not update but immediately changes back.

How to do page hero correctly? What is the width of the image? The height I want to decide...

Sorry for your frustration.
Can you provide me with temporary admin access so i can see whats going on ?

Thank you David, I tried once again so that I removed the logo from the image. It helped and now we can live with this https://tarhurinpapu-fi.hel8.wp-cloud.dev/tuotekortti/

Why did we have the logo in the image? Because now that it’s not, the logo disappears in mobile view. How and where can I influence how the header appears on the mobile view? I also wonder where the java logo will appear on the mobile? The logo is not even in the media library.

Glad to hear that - and sorry for the misunderstanding.
So the site has the Mobile Header enabled in Customizer > Layout > Header, which has its own logo field ( currently the Java Logo is still attached there ).
But if you want to keep the Logo where it shows on desktop, you would need to Disable the Mobile Header

Thank you David. I have now learned something new and useful!

Glad to be of help!