How can I edit CSS code for better mobile optimization?

Store Design
1

My website URL: https://thesnoozy.com/

Password: 123

Hi, I would like to edit some CSS code for the following sections:

  1. I would like to stretch this image with texgt out to the end of the page, like this:

InkedScreenshot (60).jpg
InkedScreenshot (60).jpg1914×969 99.2 KB

  1. This multicolumn looks good in the desktop version, but I want to space them a bit out on the mobile version:

Screenshot (62).png
Screenshot (62).png1364×961 71.2 KB

Screenshot (61).png
Screenshot (61).png1913×958 133 KB

  1. The same for this multicolumn, I’ve made the spaces good for desktop, but I don’t know how to change it only for mobile:

Screenshot (58).png
Screenshot (58).png1346×967 66.9 KB

Screenshot (59).png
Screenshot (59).png1935×963 111 KB

2

Hi @GeorgeRizos ,

Glad to support you today :grin: .

On issue 1, as i understand you want the section like this, right?

GemPages_0-1669131083747.png
GemPages_0-1669131083747.png1920×448 24.5 KB

If I am correct, you can check out my suggestion below to fix:

Please go to Online Store > Themes > click 3 dots button > Edit code > Theme.liquid and add code above the tag on the file Theme.liquid.

Eg:

GemPages_1-1669132271999.png
GemPages_1-1669132271999.png1320×860 74.2 KB

I hope you find the answer helpful. If you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages Support Team.

3

Hi @GeorgeRizos
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
For the 1 problem:

.image-with-text {
max-width: 100%;
width: 100%;
padding: 0;
margin: 0;
}

For the 2 and 3, I didn’t see any content like your image

4

Hi @ExpertRookie , I’ve tried your solution and it works, but it also does this to another image with text I have, which I don’t want. How can I only change this for the image with text on the product page?

5

Thanks! This worked perfectly!