Theme: Taste (Slide show on mobile images cut out

Store Design
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