Custom CSS Needed!

Store Design
,
1

Hi Community,

I added a custom liquid to insert the real time data from ecodrive to my homepage. I copied the code and inserted it and it worked fine. Unfortunately, it seems like the size of the image in automatically fitted to the width of the screen. On mobile it looks good but on the desktop it’s humongeous (view screenshots below). I would like to change the costum CSS so when I view the section on the desktop it appears smaller but remains the same size on mobile.

In the custom CSS field it says h2 font-size: 32px and I tried changing that but I don’t know how to input the code properly and it always ends up looking different than the original code. I suspect this has something to do with the way the image is displayed.

Desktop:

selannastudio15_1-1725479592548.png
selannastudio15_1-1725479592548.png1920×1080 277 KB

Mobile:

selannastudio15_0-1725479570156.png
selannastudio15_0-1725479570156.png1920×1080 247 KB

I am using the Dawn theme.

Thanks in advance for your help.

All the best,

Georgia

2

Hi @selannastudio15

Would you mind sharing your store URL? Thanks!

3

Hi @Made4uo-Ribe ,

of course. The shop URL is selannastudio.com

But our shop is currently still under construction and not published yet. It is password protected. Is there a way here in Shopify Community to DM the password to you? If not, how should I provide the password to you?

Thanks in advance.

Georgia

4

Hi @selannastudio15 ,

Please send me the password in private message, I will check it for you

5

Thank you @namphan . Please tell me - how can I send you a private message? I am new to the forum and I can’t find the option to do so.

6

Hi @selannastudio15 ,

You can also send it via email at my signature, I will check it.

7

Hi @selannastudio15 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.section-template--22549800419662__custom_liquid_c8AUrL-padding {
    text-align: center;
}
.section-template--22549800419662__custom_liquid_c8AUrL-padding img {
    max-width: 700px;
    margin: auto;
}
8

Yes, you can anytime drop me a message.

9

Thank you so much, @namphan ! You’re a star. I’ve played around with the code a little and can adjust the size to my liking as well as the position. Very happy :grin:

All the best,

Georgia

10

Hi @selannastudio15 ,

If you have any questions, you can contact me directly.
Nice to meet you :blush: