How to add left and right padding in custom liquid

[AntCrescendo]

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? 

[GabrielS]

Hello,

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

<p class="theclass">content here</p>

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

<style>
@media (max-width:768px) {
.theclass {
color:red;
}
}
@media (min-width:768px) {
.theclass {
color:green;
}
}
</style>

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

Let me know if this answered your question.

Cheers!

[GemPages]

Hello @AntCrescendo 

You can follow these steps:

1. Add Class name to <P> in custom liquid like this 

<p class="gp-cutom">content here</p>

2. Go to Online Store->Theme->Edit code
3. Open your theme.liquid file, paste the below code before </body>

<style>
@media (max-width:768px) {
.gp-custom {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width:768px) {
.gp-custom {
padding-left: 100px;
padding-right: 100px;
}
}
</style>

like a image

Kind & Best regards,
GemPages Support Team

[PageFly-Victor]

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

[eFoli-Marvic]

@AntCrescendo 

First, add a class name into the "P" like this

<p class="customLiquidP">Your content ...........</p>

Then add the style code to the top: 

<style>

@media (min-width: 980px){

.customLiquidP{

padding: 0 100px;

}

}
</style>

[AntCrescendo]

Hello @helloeveryone thanks for the support. 

[PageFly-Victor]

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