Changing section width through padding on Multicolumns + Rich Text – desktop vs. mobile

[juj1]

Hi! Can someone please help me figure out how to make these modification applicable for responsive design?

Two pages, similar challenges.

1/ About page: https://livewithjuj.com/pages/about

I increased the padding within the Rich Text section on the Sense Theme editor:

{
padding-left: 20rem;
padding-right: 20rem;
}

But not in the base code (couldn’t assess where to add it). Within the custom css for the section, I know I can modify it for mobile, so I’m hoping you can point me to where I can maintain this padding on desktop, but remove it from mobile.

2/ Home page: https://livewithjuj.com/pages/home

Similarly, on this particular Multicolumn section (don’t want this universal throughout the site), I added this custom css:

{
padding-left: 15rem !important;
padding-right: 15rem !important;
}

However, when it becomes responsive, I want the 3 icons to be arranged horizontally and for the button to be centered + standard width below.

Thank you in advance!

[suyash1]

@juj1 - if you want to keep padding on desktop only, then please write your css within the media query below

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

}

[PageFly-Henry]

Hi @juj1

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

#shopify-section-template–21447309918507__f2562adb-1697-4e39-8c1f-c0ec739bc084, #shopify-section-template–21358898643243__ada6e9a4-b45d-4545-a9bb-29e56ada0fdf {

padding: 0 !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[juj1]

Thank you Henry! That works perfectly for the About page.

For the homepage, the icons still stack + I would prefer them to be aligned horizontally to match the desktop version. Is that possible? Thanks again.