How to resize slideshow in header so it fits mobile?

Highlighted
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
Highlighted
Shopify Expert
2684 67 841

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!
I am away till Feb-15.
0 Likes
Highlighted
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
Highlighted
Shopify Expert
2684 67 841

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!
I am away till Feb-15.
4 Likes
Highlighted
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
Highlighted
Shopify Expert
2684 67 841

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!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
6 0 1

Thank you!

0 Likes
Highlighted
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
Highlighted
Shopify Expert
2684 67 841

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!
I am away till Feb-15.
0 Likes
Highlighted
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