Reduce distance between two sections - Palo Alto Theme

Store Design
, , ,
1

example.png
example.png1503Ă—938 17.2 KB

Hello,

How can I reduce the distance between these sections (Custom content) on my homepage for both desktop and mobile?

Thank you for your assistance in advance.

https://www.yook92.com (password: 692)

1 Like
2

Hello, I’m using premium theme.

1 Like
3

Hi @YK92

This is Victor 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 theme.css.

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

.brick__section, .brick__blocks__flex {

min-height: 60px !important;

}

.brick__block__inner {

padding: 0 !important;

}

PageFlyVictor_0-1676013181994.png
PageFlyVictor_0-1676013181994.png509Ă—366 5.86 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

4

Hello @YK92

It’s GemPages support team and glad to support you today.

You can follow these steps:

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

GemPages_0-1676012289477.png
GemPages_0-1676012289477.png400Ă—193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_0-1676014532827.png
GemPages_0-1676014532827.png1907Ă—967 156 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
5

@YK92

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

section#brick-section–template–17805975978270__05307cff-6775-4c79-b4eb-1fa124ffc9e4 {
padding: 0;
}
.brick__block__inner {
padding: 0;
}
.brick__blocks__flex.brick__blocks__flex–stuck {
min-height: 0 !important;
}
.brick__section {
min-height: 0px !important;
}
.brick__section {
padding: 12px 0 0 0;
}

If you require any further information, feel free to contact me.

Best regards,

6

Hello,

Thank you so much for your reply!

I successfully changed the distance of sections on my website, but the change doesn’t show up on my mobile website.

How can I apply this change to my website for mobile as well?

7

Hallo @YK92

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

@media only screen and (max-width: 767px) {
.rich-text.rich-text–no-image.text-center {
padding: 0 !important;
}
}

.rich-text.rich-text–no-image.text-center {
padding: 0 !important;
}

If you require any further information, feel free to contact me.

Best regards,

8

Hello,

Thank you so much for your help!

I successfully changed the distance of sections on my website, but the change doesn’t show up on my mobile website.

How can I apply this change to my website for mobile as well?

9

@YK92

apply this css

@media only screen and (max-width: 767px) {
.rich-text.rich-text–no-image.text-center {
padding: 0 !important;
}
}

.rich-text.rich-text–no-image.text-center {
padding: 0 !important;
}