DEBUT THEME - Slideshow Render in Mobile

Highlighted
New Member
1 0 0

Hi,

We are experiencing 2 issues when broswing our store in the mobile version:

1. the banners are cut for about 30% from the middle out - how do I change it? so it will show more of the width?

2. the banner are super blurry in the mobile, why is that?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
69 1 7

Hi D.H., 

David here, Shopify Guru! 

For your first question, the Debut Theme is currently using a Hero slideshow. These slideshows responsively move images down to the scaling that you are seeing on your live website currently. The below image explains how the image will be changed: 
Hero slideshow explained

This is something with this theme and other themes using a Hero slideshow that is unchangeable and will always move the image layout down to this scale. Some things to consider would be the wording you use on these slideshows and their positioning, to insure that they are not cut off. 

For the second question, the resolution of the images within the code will require to be changed to allow for the higher resolution images to be displayed on the Mobile slideshow correctly. 

Under your slideshow.liquid file, under your HTML/CSS code for the theme, you will be able to find some code listings for @media screen. The following needs to be changed to 2000x across all of these places to detailed in this image. 
Changes required for resolution

Hope this helps and have a nice week! 
David W | Shopify Guru 

0 Likes
Highlighted
New Member
4 0 0

Hi David,

I've got the exact same problem. I've followed your instructions but I'm still having the same issue with my main banner image showing up particularly burry on mobile.

I'd really appreciate your help if you can think of anything else that might need tweaking in order sort the issue.

Many thanks,

Austin

0 Likes
Highlighted
New Member
1 0 0

Hi David,

Your fix worked for my slideshow in mobile, but my "image with text overlay" is having the same issue in mobile. Is there any way to fix that too?

 

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
60 0 7

Hey friends, 

Iain here, 

I just wanted to note here that the 2000x needs to be changed across all of the options not just the ones with the arrows in the above screenshot i.e:

And as always you can reach out to us 24/7 by phone, chat or, email https://support.shopify.com/ 

Iain || Shopify Guru
24/7 365

Iain Russell || Shopify Guru 24/7 365
0 Likes
Highlighted
Tourist
4 0 4

Hi Meghann et. al.,

To fix the hero image edit the code a the top of hero.liquid, insert 2000x2000 for all the image values like so: (See results here: www.zenbed-mattress.com)

    @media screen and (max-width: 150px) {
      .hero--{{ section.id }} {
        background-image: url('{{ section.settings.image | img_url: '2000x2000' }}');
      }
    }

    @media screen and (min-width: 151px) and (max-width: 300px) {
      .hero--{{ section.id }} {
        background-image: url('{{ section.settings.image | img_url: '2000x2000' }}');
      }
    }

    @media screen and (min-width: 301px) and (max-width: 600px) {
      .hero--{{ section.id }} {
        background-image: url('{{ section.settings.image | img_url: '2000x2000' }}');
      }
    }

    @media screen and (min-width: 601px) and (max-width: 800px) {
      .hero--{{ section.id }} {
        background-image: url('{{ section.settings.image | img_url: '2000x2000' }}');
      }
    }

    @media screen and (min-width: 801px) and (max-width: 1000px) {
      .hero--{{ section.id }} {
        background-image: url('{{ section.settings.image | img_url: '2000x2000' }}');
      }
    }

    @media screen and (min-width: 1001px) {
      .hero--{{ section.id }} {
        background-image: url('{{ section.settings.image | img_url: '2000x2000' }}');
      }
    }
  </style>
{% endif %}

Good luck!

Do or do not, there is no try. - Yoda.
0 Likes
Highlighted
New Member
1 0 0

Hello, I'd like to do the same thing - we want our banner image to scale down to mobile size, not get cropped. 

 

However, I'm looking at hero.liquid and mine does not look like the examples posted here - there is no @media screen attributes at all. 

I've attached the top of my hero.liquid file here - anyone have any idea where I can make the edits posted in this thread?  Thanks!

0 Likes
Highlighted
New Member
1 0 1

got the same thing as you, Michael. And contacted Shopify staff, seems like they dont know what to do and just gave me a link saying, I can just hire an expert to get it done.

1 Like
Highlighted
New Member
1 0 0

I am having the same issue that Meghann and Michael have mentioned. I have the same screenshot as Michael. This is 3 of us having an issue that can probably be fixed quickly with a simple reply. There is no "media screen" in my html. 

0 Likes
Highlighted
New Member
1 0 0

I too am looking for a solution to this. It appears in the last six months the code has been updated and the previous answer no longer supports a usable fix.

0 Likes