How to display slideshow in full width on mobile?

roseblushstudio · ‎03-02-2024

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

ThePrimeWeb · ‎03-05-2024

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.

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

ThePrimeWeb · ‎03-02-2024

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 · ‎03-02-2024

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

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

ThePrimeWeb · ‎03-03-2024

Hey @roseblushstudio,

Seems like it's already full width?

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 · ‎03-05-2024

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

ThePrimeWeb · ‎03-05-2024

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.

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 · ‎03-05-2024

This worked, thank you!

MORPHD · ‎05-22-2024

Thank you! This worked for me too.

How to display slideshow in full width on mobile?