Slideshow being cropped on mobile

Store Design
, ,
1

My slideshow on my home page is being cropped on mobile view. Is there any way i can have it fit to screen on mobile view?

I am using Savor theme.

2

Usually, a setting of the image you could edit thru the visual editor.
Or, you might just need some CSS code override it. would you mind to share your store link here? so I could take a look.

3

There doesnt seem to be any option to edit thru the visual editor.

here is the store link:

4

I see, so, you could try a CSS way:
Put this css code at the bottom of the styles.css

@media ( max-width: 768px ){
	.slide__image-container>.slide__image{
		object-fit: none;
	}
}

My advice is you should show a different image for mobile. for the slider. I think this is more formal way. because your current desktop image is a long one, the mobile should use a more square one.

5

Ok thanks the CSS worked. Square images for mobile would be ideal. I don’t think the editor allows me to have a separate slide image for mobile, whatever i change on one view effects the other. Is there a way around this?

6

That’s the downside of using a free theme, and 19% approval rating too. Spend 60 bucks and you could have settings like different image for mobile and settings for desktop, some even for tablet.

7

I am not sure currently, need to take a look. Maybe some coding might make an exceptional for this case, and keep other as it it. need to know what is the theme structure is.
If not a big deal, and you could live with that. that is great.

8

You can create 2 Slideshow sections, one for desktop and another one for mobile, then add the CSS code to the Custom CSS of each section.

Add this code to the mobile section.

@media (min-width: 750px) {
  .hero { 
      display: none; 
      visibility: hidden;
  }
}

Add this code to the Custom CSS of the desktop version.

@media (max-width: 749px) {
  .hero { 
      display: none; 
      visibility: hidden;
  }
}

Best regards,
Dan from Ryviu: Product Reviews App

9

Both slideshows are visible when i do this. Is there a way to hide the desktop one from mobile and the mobile one from desktop?

10

Switch the codes. Put the max-width for the one you want to hide on mobile.

11

I think using responsive HTML tag would be better.
Something like this:

<picture>
  <source sizes="100vw" media="(min-width:1025px)" srcset="{{ 'kid-hats-image.jpg' | asset_url }}">
  <source sizes="100vw" media="(min-width:100px)"  srcset="{{ 'kid-hats-image_mobile.jpg' | asset_url }}">
  <img src="{{ 'kid-hats-image.jpg' | asset_url }}" alt="" />
</picture>

However, it likely need some coding for your section part so that it allow you to put an mobile image.

14

Ok so i think i figured it out. The Savor theme slideshow has the same HTML rendered for both mobile and desktop.

Workaround was to duplicate the slideshow.liquid section file and use one for mobile one for desktop.

Added this to the mobile only section file:

<style>
@media screen and (min-width: 769px) {
  #shopify-section-{{ section.id }} {
    display: none !important;
  }
}
</style>

Added this to the desktop only section file:

<style>
@media screen and (max-width: 768px) {
  #shopify-section-{{ section.id }} {
    display: none !important;
  }
}
</style>

This gave me the option of creating two separate slideshows - one hidden from desktop - one hidden from mobile.

Thanks for everybody’s help on this. Appreciate it.

15

Make sure you have added code in Custom CSS of each slideshow section