Crave theme: Image Banner Cropped In Mobile Version

Solved

Crave theme: Image Banner Cropped In Mobile Version

olivierttt
New Member
11 0 0

My slideshow was cropped in mobile version. In desktop, it displays well:

olivierttt_0-1710862629059.png

 

But in mobile, it does not work well as it was cropped much:

olivierttt_1-1710862643667.png

Anyone can help? Appreciate it so much. Thank you. My store: https://lookpositive.com/

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @olivierttt,

 

Use this, instructions are the same

<style>
@media only screen and (max-width: 989px) {
    .slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width.banner--desktop-transparent.scroll-trigger.animate--slide-in {
        align-items: flex-end !important;
    }
    
    .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
        padding-bottom: 20px !important;
    }
    
    .banner__buttons a {
        min-height: 30px !important;
        padding: 0 !important;
        min-width: 80px !important;
    }    
}
</style>
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 10 (10)

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @olivierttt,

 

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 only screen and (max-width: 989px) {
.slideshow__media.banner__media.media,
.slideshow__media.banner__media.media img {
    position: relative !important;
}

.slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width.banner--desktop-transparent.scroll-trigger.animate--slide-in {
    position: absolute !important;
    min-height: 0 !important;
}

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    padding-top: 0 !important;
}
}
</style>

 

 

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

ThePrimeWeb_0-1710863873045.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!
ThePrimeWeb
Shopify Partner
2138 615 493

@olivierttt,

 

I edited the code above, please update it. Forgot to make it apply for mobile only.

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!
olivierttt
New Member
11 0 0

It still don't work in mobile at all after I edit something in my theme, please check the code I deleted the code now from my theme

olivierttt_0-1710866784467.png

 

ThePrimeWeb
Shopify Partner
2138 615 493

Haha what did you edit? Seems like it's working now

ThePrimeWeb_0-1710866897200.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!
olivierttt
New Member
11 0 0

@ThePrimeWeb No I deleted your code and it's working as I applied another code. Can you please check how to minimize the Shop button in mobile ver? I want the button to locate below the text as same as in desktop ver.

ThePrimeWeb
Shopify Partner
2138 615 493

Oh, I see why it doesn't work. The other code you added it interfering with mine and it's causing chaos. You should ideally pick either or, please don't go and add both. Can you remove the other one you added and put mine back, that way I know what I wrote and I can fix it

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!
olivierttt
New Member
11 0 0

@ThePrimeWeb I set the theme code to original without any code added, please tell me what code should I added now to satisfy my desire. Thanks!

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @olivierttt,

 

Use this, instructions are the same

<style>
@media only screen and (max-width: 989px) {
    .slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width.banner--desktop-transparent.scroll-trigger.animate--slide-in {
        align-items: flex-end !important;
    }
    
    .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
        padding-bottom: 20px !important;
    }
    
    .banner__buttons a {
        min-height: 30px !important;
        padding: 0 !important;
        min-width: 80px !important;
    }    
}
</style>
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!
olivierttt
New Member
11 0 0

@ThePrimeWeb work perfect, thanks a lot!

Demarr
Tourist
5 0 1

I used this code and it fixed my issue, however, on mobile, I have now created a huge blank space underneath the slideshow. It looks awful and I don't know how to fix it