What's your biggest current challenge? Have your say in Community Polls along the right column.

Why aren't pictures showing in my mobile page slideshow?

Solved

Why aren't pictures showing in my mobile page slideshow?

LG999
Shopify Partner
32 0 1

Can anyone find out why slideshow on mobile page does not show pictures on my page?
Woking on to find out bugs on coding but unable to locate where
Thanks in advance !

URL
https://luxgate.co/?_ab=0&_fd=0&_sc=1

Accepted Solution (1)
saim007
Shopify Partner
609 74 103

This is an accepted solution.

@LG999 Go to Edit Code > open theme.liquid and search for </body> tag and above it paste below code - 

 

<style>
@media(max-width: 749px) {

    .slideshow__text-wrapper.banner__content {
        height: 100%;
        padding: 5rem;
    }

    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
    .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
        height: auto;
    }

    .banner__media:first-child {
        display: block;
    }

    .banner--mobile-bottom .banner__media,
    .banner--stacked:not(.banner--mobile-bottom) .banner__media {
        position: static;
    }

    .media>img {
        object-fit: cover !important;
    }

    .banner:not(.banner--mobile-bottom) .field__input,
    .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-background-1 {
        background: #fff;
    }

    .banner--mobile-bottom .slideshow__text.banner__box {
        max-width: 54.5rem;
    }

}
</style>
Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

View solution in original post

Replies 6 (6)

saim007
Shopify Partner
609 74 103

@LG999 Can you please share screenshot which slideshow is showing in desktop and which one is not showing in mobile device, because i checked everything working perfectly.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
LG999
Shopify Partner
32 0 1

Thank you for your help!
Here 

スクリーンショット 2024-04-26 12.14.59.pngスクリーンショット 2024-04-26 12.14.30.png

saim007
Shopify Partner
609 74 103

@LG999 I think you are working on another theme which is in draft because in my screen it is showing these - 

 

saim007_0-1714109096420.pngsaim007_1-1714109120209.png

 

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
LG999
Shopify Partner
32 0 1

Could you check again below contact form?
I added slideshow section and you can see them!

saim007
Shopify Partner
609 74 103

This is an accepted solution.

@LG999 Go to Edit Code > open theme.liquid and search for </body> tag and above it paste below code - 

 

<style>
@media(max-width: 749px) {

    .slideshow__text-wrapper.banner__content {
        height: 100%;
        padding: 5rem;
    }

    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
    .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
        height: auto;
    }

    .banner__media:first-child {
        display: block;
    }

    .banner--mobile-bottom .banner__media,
    .banner--stacked:not(.banner--mobile-bottom) .banner__media {
        position: static;
    }

    .media>img {
        object-fit: cover !important;
    }

    .banner:not(.banner--mobile-bottom) .field__input,
    .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-background-1 {
        background: #fff;
    }

    .banner--mobile-bottom .slideshow__text.banner__box {
        max-width: 54.5rem;
    }

}
</style>
Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
LG999
Shopify Partner
32 0 1

Thank you so much!!

All worked!