Re: How to add left and right padding in custom liquid

How to add left and right padding in custom liquid

AntCrescendo
Excursionist
32 0 6

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? 

 

 

 

 

Replies 6 (6)

GabrielS
Shopify Partner
486 107 116

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!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email [email protected].
Have I helped you? Like my post.

GemPages
Shopify Partner
5625 1261 1243

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

GemPages_0-1669187417116.png


Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1785 3101

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
Shopify Partner
223 40 39

@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>

 

Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
AntCrescendo
Excursionist
32 0 6

Hello @helloeveryone thanks for the support. 

PageFly-Victor
Shopify Partner
7865 1785 3101

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