Notice that whitespace above and below the image banner, on desktop only. Can that be removed?
Thanks
Topic summary
Main issue: Excess whitespace above and below the homepage image banner on desktop.
Diagnosis: A CSS change from object-fit: cover to object-fit: contain in the theme caused the space. “Contain” fits the whole image inside the container (no cropping) but can leave empty space; “cover” fills the container (no space) but crops edges.
Proposed fixes: Revert to cover or adjust CSS in theme.liquid. Instructions were given to edit the Shopify theme code (Online Store > Themes > Edit code) and insert custom CSS before . Adjusting banner height was offered, and a recommended banner image size of 2048Ă—2048 px was suggested.
User requirement: Show full images side by side without cropping or zoom. With “cover,” images appeared cut off; with “contain,” whitespace appeared—highlighting a layout trade-off.
Outcome: The user rebuilt the landing page using the PageFly app, which resolved the issue. No further code changes were pursued. Images/screenshots were shared to illustrate the desired banner appearance. The thread is effectively resolved.
1 Like
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.