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.

[tim_1]

I agree with Maximus – create two sections.

However, in regards to CSS – there is a simpler way.
Use “Custom CSS” in Section settings and use code like this:

For desktop section:

@media screen and (max-width: 749px) {
 { display: none; }
}

For Mobile section:

@media screen and (min-width: 750px) {
  { display: none; }
}

So you do not need to search for cryptic ids – the system will do what’s necessary itself.
Note that these codes are only valid if used in Section Settings-> Custom CSS, it’s invalid CSS otherwise.

I’ve shared similar recipe earlier – How to upload video on website banner for mobile and dekstop - #5 by tim_1

[VikingPlatformTennis]

Thank you for thoughtful response.

We have the budget to pay for a theme if you have a recommendation that would solve for this easier.

My next question would be, when you say bandaid, it is still solving the problem right? What is the downside in using this instead of paying above. I am happy to pay like I said if you think there is a better version to run like savor with better features please direct me.

I guess that would mean I’d have to redo the site but I don’t have a ton of customization and could replicate it pretty quickly. Thank you.

[Maximus3]

I say band-aid because you’re having to create 2 sections to complete 1 task and do custom code to hide one of them, when it could have just been written into the theme code to begin with. It’s fine though. The section custom css box has a character limit of 500 I think. So depending on how many things you need to customize that’s not already in the theme, you may hit that limit, and be forced to edit the code files directly. Tim is right though, that is much better, I overworked it.

As for a better-than-free theme, there are many. The good thing about Shopify’s theme store is you can try before you buy. So test some out. You’re allowed like 20 themes in your library.

[VikingPlatformTennis]

@tim_1

@media screen and (min-width: 750px) {
  { display: none; }
}

Hi, Thank you. I was able to duplicate the sections and now have different images for desktop and mobile. HOWEVER, I am still running into the same issue where my images are not being maximized to allowable screen size on mobile. I am also using canva for my images so I can format correct size and tried 1080x1920 and 360 x 640. I have also adjusted the slide image size between auto, small, medium and large. I feel like something is in the code that is capping the height and not allowing the image to be larger. Its almost like all the slideshow images are being told to be the exact height so maybe something related to that?

[VikingPlatformTennis]

I do understand you did originally say it is a Full Frame section, meaning it fills the viewport. which you are telling me doesn’t have any aspect ratio setting, but i guess is there a way to make the viewport on MOBILE longer so it fills the screen. I guess that is the issue, because at the end of the day if the viewport is not going to fill the mobile screen then it wouldnt matter what image i used.. and it would never get rid of the white at the bottom? Correct?

[VikingPlatformTennis]

Other sites i am seeing i could do CSS to create a dynamic viewport height for mobile ?

[VikingPlatformTennis]

I am very much a novice but i think the viewport slide setting is on max width which is fine for desktop but not fine for mobile and that is the issue, so is there a way to change the css coding for the mobile portion only. sorry if you can please review my other comments i sent in different messages above!

.slideshow–with-hints slideshow-slide {
width: calc((100vw - var(–page-margin) * 2));
overflow: hidden;
}

[tim_1]

Somehow, theme devs deicded that “Full-Frame” should only apply to width.
And, somehow, they decided to omit “Screen height” from the “media height” setting options.

You can, however, use CSS to force your image to become an actual full-frame hero.

Use something like this in sections “Custom CSS”:

slideshow-container {
  --slide-min-height: 100svh;
  --slide-min-height-desktop: 100svh;
}

This will stretch your slides to full window/screen height.

Horizon 'family' extensively uses CSS variables to control different aspects of the site.

I strongly advice to override those variables (if relevant variables exist) rather than trying to override actual element properties, because there is a system where one variable is used to calculate another and so on.

So, when you override a variable, entire system works as intended, “child” variables are re-calculated properly and entire system works as intended with different setting.

If you amend a CSS property directly, you’re kinda “fighting the system” and some elements may not work properly anymore.