Hi, there is a tiny gap between my first hero section and second (featured product section). How to remove it and make the background seamless as one whole?
store: www.alpluscosmetics.bg
pass: 1904
Theme: Sense
Topic summary
A user is experiencing a small gap between their hero section and featured product section, seeking to create a seamless background.
Proposed Solutions:
Three different approaches were offered:
-
Custom CSS via theme.liquid: Insert CSS code above the
</head>tag in the theme.liquid file to remove spacing -
Targeted CSS in base.css: Add media query targeting screens 750px+ with
margin-bottom: 0px !importantfor specific section classes at the end of base.css file -
General CSS approach: Insert CSS code at the bottom of stylesheet files (base.css, theme.css, styles.css, custom.css, or theme.scss.liquid)
All solutions involve accessing Shopify Admin → Online Store → Themes → Edit code and adding custom CSS to eliminate the gap. Multiple respondents included visual examples showing the expected result. The discussion remains open with no confirmation of which solution worked.
1 Like
Hi @alplus ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
1 Like
Hello @alplus
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.
@media screen and (min-width: 750px) {
.section-template--20760173805913__ss_video_banner_F3Nr8y {
margin-bottom: 0px !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
1 Like
Hello @alplus
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
See image
Best Regards,
Dws_pvt_ltd