Shopify Theme Vision is cutting off my banner image on wide screens

Technical Q&A
, ,
1

Hi there,

I am having an issue with my main page image banner.
When it’s seen on very wide desktops a lot of the image is cut off at the top and bottom.
The same happens on mobile depending on the settings of the phone.

Is there any way to avoid that? I read a ton of forum posts about this issue, but none solved it for me. Ideally as custom CSS, so I can change it myself if needed.

I am using the vision theme and the theme support has not been able to help.
The text is in the image because Vision is very limited with text positions and the text inside the theme never ends up where it looks nice.

But if I can’t solve that problem, I have to go back to adding the text via the theme editor.

my website is: joyandsunshine.de

2

Hey @a.bruns1

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.slideshow-image--desktop {
    object-fit: contain !important;
}
</style>

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Thank you, I tried it, but it didn’t change anything. But I changed the desktop height in my theme editor to “adapt to image” and it looks a little bit better, but it the screen is really wide there are blank areas left and right.

I guess it is a work around for now, but not 100% ideal :smiley: