FROM CACHE - en_header

Re: Crave theme: Image Banner Cropped In Mobile Version

Solved

Crave theme: Image Banner Cropped In Mobile Version

olivierttt
New Member
11 0 0
‎03-19-2024 11:38 AM

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/

Labels:
845 Views
0 Likes
Report
Accepted Solution (1)
In response to olivierttt

ThePrimeWeb
Shopify Partner
2139 616 515
‎03-19-2024 01:09 PM

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

795 Views
0 Likes
Report
Replies 12 (12)

ThePrimeWeb
Shopify Partner
2139 616 515
‎03-19-2024 11:58 AM

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!
834 Views
0 Likes
Report
In response to ThePrimeWeb

ThePrimeWeb
Shopify Partner
2139 616 515
‎03-19-2024 12:04 PM

@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!
829 Views
0 Likes
Report
In response to ThePrimeWeb

olivierttt
New Member
11 0 0
‎03-19-2024 12:46 PM

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

 

810 Views
0 Likes
Report
In response to olivierttt

ThePrimeWeb
Shopify Partner
2139 616 515
‎03-19-2024 12:48 PM

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!
809 Views
0 Likes
Report
In response to ThePrimeWeb

olivierttt
New Member
11 0 0
‎03-19-2024 12:50 PM

@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.

806 Views
0 Likes
Report
In response to olivierttt

ThePrimeWeb
Shopify Partner
2139 616 515
‎03-19-2024 12:52 PM

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!
802 Views
0 Likes
Report
In response to ThePrimeWeb

olivierttt
New Member
11 0 0
‎03-19-2024 01:00 PM

@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!

800 Views
0 Likes
Report
In response to olivierttt

ThePrimeWeb
Shopify Partner
2139 616 515
‎03-19-2024 01:09 PM

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!
796 Views
0 Likes
Report
In response to ThePrimeWeb

olivierttt
New Member
11 0 0
‎03-20-2024 12:54 AM

@ThePrimeWeb work perfect, thanks a lot!

749 Views
0 Likes
Report
In response to ThePrimeWeb

sallyapo
Visitor
1 0 0
‎08-11-2024 03:45 PM

Hey, Prime Web,

 

This didn't work for me. I'm using Crave. Samsung phone. Edge browser. ParaklesisPressBooks.com  

 

I have three problems-

  • cropped image in header
  • no images on product pages
  • hamburger menu won't open.

Can you give me any help on these issues? 

393 Views
0 Likes
Report
In response to ThePrimeWeb

Demarr
Tourist
5 0 1
‎06-17-2024 10:38 PM

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

498 Views
0 Likes
Report
In response to ThePrimeWeb

Yasemen
Visitor
2 0 0
‎11-27-2024 04:58 PM

Hi there! I also have a problem with my slider. I am using crave theme and for desktop I need the same image for frst and second image but for mobile I want to use only one image. Is there any way to solve this! thank you

112 Views
0 Likes
Report

Community Blog Articles

top members.webp
Celebrating Our Members of the Month | December '24

Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...

By JasonH Jan 7, 2025
top members.webp
Holiday Cheers to Our Community | November '24

Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...

By JasonH Dec 6, 2024
starting.webp
Dropshipping Viral Products to Sell in 2025

Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...

By JasonH Nov 27, 2024
Terms of Service Privacy Policy