How to resize slideshow in header so it fits mobile?

Tourist
6 0 1

Looks perfect on a computer, howevr when I go to mobile, majority of it is cutoff. I know there had to be a code or way to get just my slideshow to format correctly or shrink to fit mobile. I've seen a lot of shopify sites that do it.... I just don't know. I created a custom slideshow..... perhaps I should use an app for a slider which might auto adjust that for mobile?? 

1 Like
Shopify Expert
2652 60 649

Hi Engineer, 

That's not a bug of a theme, this is by design. There are several ways to make your slideshow scale instead of cropping (and some of them are already shared on this forum).

Unfortunately, without seeing your site, or at least knowing the theme you're using it is impossible to suggest anything.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
6 0 1

Land.com is my shopify, would love to hear how I can fix the slide so that it auto scales on mobile. Thanks

0 Likes
Shopify Expert
2652 60 649

Generally, it's a good idea to have all slides to have the same aspect ratio. Your slides 2 and 3 are 1920x610, so the aspect ratio is 31.8%. The first one is taller, so you should try which AR will work for you best.

You may try adding this code to the very bottom of your theme.scss.liquid Asset:

/* --tim: force slideshow resize instead of cropping */
.slideshow{
    height:auto; /* override the height value from the section.seettings */
}
.slideshow__image, 
.slideshow__link {
    position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
    padding-bottom:31.8%; /* here is the aspect ratio of images */
}

I have not tested this code extensively -- it works on my desktop, but I'd recommend testing it in different scenarios.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
4 Likes
Tourist
6 0 1

Worked perfect! Thank you! However, now my text on the images is extremely large and not proportional to how it is when on desktop. I'm assuming there is a fix for that also?

0 Likes
Shopify Expert
2652 60 649

Something like this will help:

@media only screen and (max-width: 480px) {
    .mega-title {
        font-size: 1.2em;
    }
    .mega-subtitle {
        font-size: 0.8em;
    }
    .slideshow .slick-dots {
        bottom: 5px;
    }
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
6 0 1

Thank you!

0 Likes
New Member
4 0 0

I added this to my code, exactly where you explained but nothing at all happend, the image is still cropped on the mobile device.

Could you help ?

Page is: phenomenal-quotes.myshopify.com

0 Likes
Shopify Expert
2652 60 649

Hey depayem

different versions of the theme seems to have different rules structure. For yours you should make the  first rule more prevalent, like so:

#shopify-section-slideshow .slideshow {
    height: auto ;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
4 0 0

Hey Tim, 

I tried what you advised me too, but it didnt Work, therefore i added Screenshot of the Code and what happend to the Site after i added the Code. I am probably doing something wrong ?

0 Likes