Solved

How to display slideshow in full width on mobile?

roseblushstudio
Tourist
6 0 1

I cannot get my slideshow to show up in full width on mobile, is there a fix for this?

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 488

This is an accepted solution.

Oh okay. 

 

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>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    position: unset !important;
    object-fit: contain !important;
}

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media ,
.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: max-content !important;
}
</style>

 

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

ThePrimeWeb_0-1709649844067.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

Replies 7 (7)

ThePrimeWeb
Shopify Partner
2138 614 488

Hey @roseblushstudio,

 

Can you share the link to your store and maybe a screenshot of the section you mentioned? Thanks!

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!
roseblushstudio
Tourist
6 0 1

I haven't launched this version of the site yet but here is the preview for it.

https://1ogniiheerdwwzyb-56170152020.shopifypreview.com

 

Screenshot 2024-03-02 at 8.12.44 PM.pngScreenshot 2024-03-02 at 8.12.50 PM.png

ThePrimeWeb
Shopify Partner
2138 614 488

Hey @roseblushstudio,

 

Seems like it's already full width?

ThePrimeWeb_0-1709459309381.png

 

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!
roseblushstudio
Tourist
6 0 1

Sorry so what I mean is that the image is being cropped on mobile, instead of being shrunken down? does that make sense?

ThePrimeWeb
Shopify Partner
2138 614 488

This is an accepted solution.

Oh okay. 

 

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>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    position: unset !important;
    object-fit: contain !important;
}

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media ,
.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: max-content !important;
}
</style>

 

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

ThePrimeWeb_0-1709649844067.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!
roseblushstudio
Tourist
6 0 1

This worked, thank you!

MORPHD
Visitor
1 0 0

Thank you! This worked for me too.