Way too much whitespace above and below image banner

https://empiricalwater.com/

Notice that whitespace above and below the image banner, on desktop only. Can that be removed?

Thanks

1 Like

Hi @empiricalarby

The reason for that is the object-fit: cover change into contain. The image banner must be like this right?

because of this code.

If you are familiar with the code you can find this on the theme.liquid. Or if you add this better to remove.

If not then paste check this code.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.


And Save.

And if you like to change the height of the banner then let me know.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

Please check the result. I need the full images to show side by side, currently they are cut off on the sides and zoomed in too much. Thanks

Did you try to adjust the size of the image?

The recommended size are 2048 x 2048 pixels for the image banner.

Nvm, rebuilt the landing page with PageFly and the problem is solved

Do you mean an app? Good to hear then.