Mobile version of the slideshow and image sections looks terrible. How do I fix this?

[kw2024]

Hey,

Does anybody know how to fix my mobile version? all the image banners are cropped and the buttons and texts are overlapping.

the website looks perfect on the desktop but is messy on the mobile.

I have gone through most threads and couldn't solve the issue.

Adding a code in the base.css or anywhere is not making any difference.

      

[abdulmoeed37]

Hi @kw2024 ,

Can you please share the website url so that I can inspect the issue in detail?

[kw2024]

hello, heres the website url- https://www.kefiwellness.in/

[abdulmoeed37]

Hi @kw2024 ,

I have analyzed the website and the main problem is that the text is not a seperate entity and is a part of the image and on mobile the image is set to cover that is why it is covering the whole banner space.

There are two solutions to this problem:
1. Use separate images for mobile and desktop.

2. Remove the text from image and add it through html so that it will adjust itself on mobile (currently only the button is part of the html, rest is the image).

Let me know your thoughts about it.

[kw2024]

Hi,

Thanks for responding. But even if the text is a part of the image, the image shouldn't get cropped right? I want the whole width of the image. and placement of the button to be right

[abdulmoeed37]

Yes you can do that if you add the object-fit: contain property to the banner image.

But the problem is the images will not fit the height of the banner as you can see in below image so you have to reduce the size of the banner as well.

And you also have to give position absolute to the button and adjust its left and top property to adjust it.

If you know html css you can easily do this if not let me know and I will do it for you.

[kw2024]

can you please help me with the html css. That would be great

[abdulmoeed37]

Yes sure, if you are comfortable, just give me the collaborator access to your store and I will add it for you.

[kw2024]

can you add the code here and guide me to the location to add it? I'm Designing this for a client and cant share the access

[abdulmoeed37]

okay no problem,

just go to your theme base.css file and at the very end of the file, add the following css to adjust banner on mobile.

@media screen and (max-width: 749px) {
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 100% !important;
        padding: 25px 0px !important;
    }
    .slideshow__text.banner__box {
       padding: 105px 0px 0px 30px !important;
    }
}

[kw2024]

thanks. that kinda solved the image crop problem. but the button is still huge. 

[abdulmoeed37]

okay let me give you another code that will solve your button problem as well.

[kw2024]

thank you!. and also this page is looking very wonky. url- https://www.kefiwellness.in/pages/vela-aromatherapy

i have added a custom css for the text box alignment on desktop. on mobile its just looking bad and overlapping. can you please help me fix it

[abdulmoeed37]

Yes sure,

Here is the css code to adjust the button size.

@media screen and (max-width: 749px) {
  .slideshow__text.banner__box a.button {
     min-height: 100% !important;
     padding: 7px 12px !important;
   }
}