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
1 Like
- 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.
1 Like
Hello @Emma_Richards
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
@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;;
}
}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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!
Glad to help you. Have a good day @Emma_Richards .
