How to fix text and image overlap in tablet slideshow?

Store Design
1

When you rezise a browser to the tablet media range of (770 - 937) there are overlaps between the text and the background image, making the text hard to read. See the screenshot attached. I am using Refresh Thema and custom slideshow code which separate mobile and dekspot slide image. But i want show same dekspot image in tablet without any cropping. Mobile is perfect.

Store: maiseey.com

error.png
error.png1366×768 182 KB

2

Hi @zamanhasanov23 ,

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hello @zamanhasanov23 ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1678768007707.png
GemPages_0-1678768007707.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1678768030571.png
GemPages_1-1678768030571.png1415×899 68 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Thank You Very Much. Code works perectly. Now my pc version image fits all tablet size. But i also need a code for phone. I check chorme browser Samsung S8+ device is perfect and when i change Galaxy S20 Ultra it crops same corner. Can we paste a code it not crop and optimize all mobile size?

5

Thank you GemPages. My issue resolved.