Removing Padding from Custom Content Blocks

KryssyKlaws
Tourist
4 0 0

Hello!

I am struggling to find a code to remove the padding from under my custom content sections. When I insert the option to add a video, youtube specifically, it adds a large empty space under both videos. I am not sure what is the correct code to fix and would love any assistance that can be provided. 

Reply 1 (1)

Solutions1
Trailblazer
152 12 24

Hello KryssyKlaws!

Crude way, find in your style.css(or style.scss.css) , It may not look exactly like this as % numbers may be generated dynamically.

.section {
padding-top: 3.5%;
padding-bottom: 3.5%;
}
BELOW that add:

[id^=shopify-section-my-studio] .section {
padding-top: 1.5%;
padding-bottom: 1.5%;
}

The right ways:

use the css classes padless-top and padless-bottom on your section blocks html

You'd want to leave the base template alone so you dont affect all site /pages

Find the template in your theme code for /pages and duplicate it:

https://help.shopify.com/themes/customization/store/create-alternate-templates

Then give that alternate template a <style>...</style> tag with the correct CSS to override the global stylesOr look for this code in your styles.sccs.css

You could also add a css ID to a content wrapper then use that to target that pages sections in your global styles.css in the .section area of your css

#my-studio .section {
padding-top: 1.5%;
padding-bottom: 1.5%;
}

Hope this helps!

Thanks

Solution1