Archived topic
Hero image gets cut off in GP shop template (soap theme)
3 replies · Started by sunrunning on August 11, 2022
Dear GP Team,
I wanted to upload my own image to the Shop Hero image header but it gets cut off, cf. screenshots. How can I change that?
Thank you ever so much!
https://ibb.co/6YVrVt7
https://ibb.co/9HfMzHQ
I'm also adding a preview link to my site below.
Hi there,
if you edit the Shop Page Hero Element in Appearance > Elements, you can select the Container Block the Image is set as the background. And in the Spacing settings you can set a Minimum height.
If you want to show 100% of the image on ALL screen sizes then we need Container block to have the same Aspect Ratio as the original image.
1. Calculate your original images aspect ratio of height / width * 100 = aspect ratio %
Which for your image is: 960 / 1280 * 100% = 75%
2. Set your Container Blocks Minimum height to 75 VW - note the VW units this the % width of the viewport.
Wow, awesome, thank you so much, David! 💚
Glad to be of help!
