Debut Theme Rich Text Section - Padding reduction

Solved

Hi there, here's my website: www.bigglyboo.com

 

I need some code to reduce the  Rich Text padding. I search through this forum and tried several solutions but none of them have worked. Please help!!!

 

website.PNG

 

Thank you guys in advance!!

BigglyBoo | Cute socks, sandals, and shoes for cute babies.

0 Likes

Success.

Shopify Expert
2496 417 525

Hi @BigglyBoo 

This is default padding all landing page section as you can see on all section too much space.

 

You can reduce all by adjusting bellow css:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.index-section { padding-top: 35px; padding-bottom: 35px; }
@media only screen and (min-width: 750px){.index-section { padding-top: 55px; padding-bottom: 55px;}}

Note: decrease value as you want to reduce space from top and bottom, That reduce space from all section. if you want to reduce from only your given then follow this:

 

#shopify-section-hero{padding-bottom: 0;}
#shopify-section-1561845933860 { padding-bottom: 0; padding-top: 0; }

Note: This css only work for your given section.

 

 

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like

I pasted the code you provided but it didn't work :(

BigglyBoo | Cute socks, sandals, and shoes for cute babies.

0 Likes

It's working actually!! Not sure why it didnt' work earlier.

 

Thanks a lot Jasoliya!

BigglyBoo | Cute socks, sandals, and shoes for cute babies.

0 Likes
Tourist
15 0 1

Where can I find the section number?


@Jasoliya wrote:

Hi @BigglyBoo 

This is default padding all landing page section as you can see on all section too much space.

 

You can reduce all by adjusting bellow css:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.index-section { padding-top: 35px; padding-bottom: 35px; }
@media only screen and (min-width: 750px){.index-section { padding-top: 55px; padding-bottom: 55px;}}

Note: decrease value as you want to reduce space from top and bottom, That reduce space from all section. if you want to reduce from only your given then follow this:

 

#shopify-section-hero{padding-bottom: 0;}
#shopify-section-1561845933860 { padding-bottom: 0; padding-top: 0; }

Note: This css only work for your given section.

 

 

 

 


 

0 Likes
Shopify Expert
2496 417 525
Right click on this section and select inspect element
You can see main section with different ID
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes