Savor Theme: Slideshow: Full Frame Issue with Mobile

[VikingPlatformTennis]

Hi,

I am running savor. For our landing homepage, we have a single block that is “Slideshow: Full Frame”. It is formatted perfectly for desktop, but is cut off on mobile. Unfortunately, unlike a Hero block, they do not offer an alternative to upload a mobile image. I wanted to explore the following:

1. Code to maximize the mobile image so it fills the users phone screen upon landing, currently there is a large white space at the bottom.

2. figure out a way to add alternative mobile image to each slideshow image

3. Code to have slideshow specifically for desktop, and a separate slide show for mobile. I assume this is the most complicated of the options and would have to hire someone. But is it possible?

I have included an example of how the image appears on mobile. I have also included a screen shot the of the code I am seeing.

Thank you.

[Maximus3]

Looks like that space at the bottom is not related to the image itself. Maybe it’s a margin setting.

It’s better for everyone if you include website url

[VikingPlatformTennis]

Viking Athletics

password: viking2026

Given the vertical nature of mobile, and how horizontal these images are (great for desktop) maybe I need to figure out a way to have two different slide shows, one for desktop or one for mobile.

Any advice is appreciated. Maybe a code that fits image to max mobile screen height even though it would be zoomed in?

[Maximus3]

@VikingPlatformTennis

viking2026

Ok, this is actually a behavior of the section itself. It’s a Full Frame section, meaning it fills the viewport. And since it doesn’t come with desktop/mobile images and doesn’t have any aspect ratio setting, it doesn’t change the image to fit mobile. It’s easier to make a separate section, and hide/display according to mobile/desktop.

So, duplicate the section. Then put the image you want on mobile in that slideshow. Then with some magic, you can hide it depending on which width screen the user has.

When you’re in the editor, and you select the section, in the address bar you will see the section ID. It will have unique numbers:

You’ll need to write these down for each section and mark for desktop/mobile.

Go to theme settings and scroll to “Custom CSS”:

For the DESKTOP slideshow, put this code:

@media screen and (max-width: 749px) {
  #shopify-section-template--XXXXX__slideshow_XXXXX { display: none; }
}

For the MOBILE slideshow, put this code:

@media screen and (min-width: 750px) {
  #shopify-section-template--XXXXX__slideshow_XXXXX { display: none; }
}

Replace the XXXXX with the actual ID numbers. Remember. The code for Desktop will have the ID for Mobile to hide, and vice versa.

Keep in mind that this is only a band-aid because your free theme lacks basic settings.