Theme: Taste (Slide show on mobile images cut out

Store Design

Topic summary

A user is experiencing an issue where slideshow images on their Shopify store appear cut off when viewed on mobile devices, despite looking correct on desktop.

Initial Solution Provided:

  • A support representative (layoutbase) provided CSS code to add to section-image-banner.css that sets images to position: static and height: auto on mobile screens
  • This fix successfully resolved the cut-off issue

Secondary Issue:

  • After implementing the fix, extra white space appeared below the images on mobile
  • The original poster and another user both requested help removing this extra spacing

Follow-up Solution:

  • layoutbase returned after a holiday delay with additional CSS code targeting .banner__media elements to set height: auto for non-stacked, non-mobile-bottom banner configurations
  • This second code snippet aims to eliminate the unwanted spacing while maintaining proper image display

Note: Users may need to manually adjust image sizes to ensure consistent heights across the slideshow.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

hey guys! so im in the middle of building my website and as im editing on desktop it looks good, but when I view it on my phone the images on the slideshow cut off.. can someone help?

this is the link :

https://felipescreations.myshopify.com

2

I’d appreciate it!

3

They are full width

download (23).png
download (23).png412×539 84.3 KB

4

Hi @felipe10221 ,

Layoutbase here, we recommend the following fix:

  1. Go to Online Store → Theme → Edit code
  2. Asset->/section-image-banner.css
  3. Paste the following code at the bottom of the file:
@media screen and (max-width: 749px) {

   .banner__media  img {

    position: static!important;

    height: auto!important;

  }

}

Note: When you update this code, the height of the images will NOT be equal. You will need to manually change the size of images to the same. You should be able to do this through Shopify Theme Editor.

Hope you find this suggestion useful!

Best regards,

Layoutbase - Homepage & Blog page-builder

5

Thank you very much! I’ll try it out

6

Ok so it definitely did work! Now is there a way I can remove that extra space at the bottom? So it shows just the image and not the extra space?

7

Hello Felipe10221, did you find a fix for the extra space under the image? If so, I’d really appreciate it if you could share that with me please. Thanks

8

Hello! I did not find a solution for that.

9

Hellp @felipe10221 & @ChantelW ,

Sorry for the delayed reply, our staff was on holiday in the past month. Let’s try adding some css, here are the steps;

  1. Go to Online Store-> Theme->Edit code
  2. Asset->/section-image-banner.css
  3. Paste the following code to the bottom of the file:
@media screen and (max-width: 749px){
	.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
	    height: auto!important;
	}

}

Sincerely,

Layoutbase