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

Store Design
, , , , , , ,

Topic summary

A Shopify store owner is experiencing mobile responsiveness issues where image banners are cropped and buttons/text overlap, while the desktop version displays correctly.

Root Cause Identified:

  • Text is embedded within banner images rather than being separate HTML elements
  • Images use object-fit: cover property, causing cropping on mobile devices

Solutions Provided:

  1. Use separate images optimized for mobile and desktop
  2. Extract text from images and add via HTML for better responsive behavior
  3. Apply object-fit: contain to prevent cropping (though this creates height fitting issues)

CSS Fixes Applied:

  • Custom media queries added to base.css to adjust banner padding and minimum height on mobile
  • Additional code provided to resize oversized buttons on mobile devices
  • Positioning adjustments made using absolute positioning

Current Status:
The image cropping issue is partially resolved, but button sizing problems persist. A secondary page (/pages/vela-aromatherapy) also has overlapping text alignment issues on mobile that require additional fixes. The helper is providing iterative CSS solutions to address each problem as it’s identified.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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.

01.jpg
01.jpg1827×743 90.3 KB

02.jpg
02.jpg386×510 23 KB

2

Hi @kw2024 ,

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

3

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

4

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.

5

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

6

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.

abdulmoeed37_0-1739122655957.png
abdulmoeed37_0-1739122655957.png696×1408 138 KB

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.

7

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

8

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

9

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

10

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;
    }
}
11

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

12

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

13

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

14

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;
   }
}