How to add left and right padding in custom liquid

Store Design
,
1

Hello, I have added a custom liquid section with some code for styling my text, I would like to know how to apply specific padding for desktops and specific padding for mobile. Currently, if I apply 100px padding on the right and left, it will apply the same style on mobile.

Please see the image with the highlighted code: https://postimg.cc/fSs5YQrY

I am using the Dawn Theme

Any recommendations on how to accomplish this?

2

Hello,

Firstly, you should add a class to your p element, it would look as following**:**


content here

Secondly, you’d have to target this class through CSS, as below:

The color red would be reflected on mobile phones, while green on desktop.

Let me know if this answered your question.

Cheers!

3

Hello @AntCrescendo

You can follow these steps:

  1. Add Class name to

    in custom liquid like this


content here
  1. Go to Online Store->Theme->Edit code
  2. Open your theme.liquid file, paste the below code before

like a image

GemPages_0-1669187417116.png
GemPages_0-1669187417116.png1607Ă—897 64.5 KB

Kind & Best regards,
GemPages Support Team

4

Hi @AntCrescendo ,

This is Victor from PageFly - Shopify Page Builder App.

I’d like to suggest this idea:

Please use @media Rule in CSS to do this

On mobile:

@media only screen and (max-width: 600px) {

  p {

    padding: ....;

  }

}

On desktop:

@media only screen and (min-width: 600px) {

  p {

    padding: ....;

  }

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

@AntCrescendo

First, add a class name into the “P” like this


Your content ...........

Then add the style code to the top:
6

Hello @helloeveryone thanks for the support.

1 Like
7

You’re welcome, @AntCrescendo . I’m glad if my solution can help!