Problem with text overlapping image on mobile only

[Emma_Richards]

Hi, on desktop my image and text dont overlap, and the image size is perfect. However on mobile the text overlaps the image, making the text super hard to read. When i make the image smaller, the desktop image goes smaller but the image on mobile doesnt go smaller (unless i make the image very small on desktop, only then the image on mobile will go smaller)

Here is what is looks like on desktop: 

This is what it looks like on mobile:

My site URL is bowtime.co.uk

the password to enter is: lucigi

I have been trying to fix this for the last couple of weeks, so any help is greatly appriciated

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Emma_Richards 
- Please follow these steps:

 

- Then find the slick.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media screen and (max-width: 600px) {
    .section-slideshow-v3 .slider-img img {
        width: 51% !important;
    }
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Emma_Richards]

Thank you so much!

[BSS-TekLabs]

Glad to help you. Have a good day @Emma_Richards .

[niraj_patel]

Hello @Emma_Richards 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
   .section-slideshow-v3 .slider-img img {
        width: 50% !important; /*adjust according to you*/
    }
    .section-slideshow-v3 .slideshow-content {
        width: 50% !important; /*adjust according to you*/
        left: 11px !important;;
        top: 68px !important;;
    }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Spotiflyerteam]

Text overlapping images on mobile can definitely be a tricky issue. It might be related to responsive design settings or CSS issues specific to mobile devices. Here are a few things you might try:

. Check CSS Media Queries: Ensure your CSS includes media queries that adjust text and image placement for mobile devices.
. Adjust Z-Index: Sometimes, adjusting the z-index in your CSS can help with layering issues.
. Use Flexbox or Grid: Implementing flexbox or CSS grid can help manage layout more effectively across different screen sizes.

If you need a break from troubleshooting, enjoy some great music with SpotiflyerApp. Download your favorite tracks and take a moment to relax—good vibes can often help spark creative solutions!

[Spotiflyerteam]

You must be also check.