Solved

Why isn't my slide show appearing on mobile?

nicolewx
New Member
4 0 2

Hi! My slide show appears fine on desktop but not on mobile. Can someone help 😞

nicolewx_0-1713539651538.png

nicolewx_1-1713539673295.png

 

 

 

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @nicolewx,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media screen and (max-width: 749px) {
.slideshow__media.banner__media.media {
    display: block !important;
    position: relative !important;
}

.slideshow__text-wrapper.banner__content,
.slideshow__media.banner__media.media:before,
.slideshow__media.banner__media.media:after {
    display: none !important;
}

.slideshow__media.banner__media.media img {
    object-fit: contain !important;
    position: relative !important;
}

.slider.slider--everywhere .slider__slide {
    height: 100% !important;
    min-height: 0 !important;
    max-height: unset !important;
}
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713539943395.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

PageFly-Henry
Shopify Partner
1136 322 276

This is an accepted solution.

Hi @nicolewx 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.slideshow__media.banner__media.media {

    display: block !important;

}

.slideshow__media.banner__media.media img {

    object-fit: contain !important;

}

div#Slider-template--17647482142973__slideshow_iEXAHe {

    height: 200px !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @nicolewx,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media screen and (max-width: 749px) {
.slideshow__media.banner__media.media {
    display: block !important;
    position: relative !important;
}

.slideshow__text-wrapper.banner__content,
.slideshow__media.banner__media.media:before,
.slideshow__media.banner__media.media:after {
    display: none !important;
}

.slideshow__media.banner__media.media img {
    object-fit: contain !important;
    position: relative !important;
}

.slider.slider--everywhere .slider__slide {
    height: 100% !important;
    min-height: 0 !important;
    max-height: unset !important;
}
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713539943395.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

PageFly-Henry
Shopify Partner
1136 322 276

This is an accepted solution.

Hi @nicolewx 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.slideshow__media.banner__media.media {

    display: block !important;

}

.slideshow__media.banner__media.media img {

    object-fit: contain !important;

}

div#Slider-template--17647482142973__slideshow_iEXAHe {

    height: 200px !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.