How do I make the space smaller in rich text, between the banner and the collection grid?
Thanks for your help.
Link
Topic summary
A user seeks to reduce vertical spacing between a rich text banner and collection grid on their Shopify store using the Lorenza theme.
Solutions Proposed:
-
First approach: Add CSS targeting
.rich-text + .collection-listwith negativemargin-topin base.css or theme.css, or adjust padding/margin settings directly in the Theme Customizer. -
Second approach (with visual confirmation): Insert CSS into theme.css targeting
.section.section--spacing-tallwith reduced padding values (3rem top, 2rem bottom) for screens wider than 38em. A screenshot demonstrates the reduced spacing after implementation.
Current Status:
The user attempted the first solution but reported it didn’t work. The second solution appears more specific to the Lorenza theme’s class structure and includes visual proof of effectiveness. The discussion remains open as the user hasn’t confirmed which solution resolved their issue.
hi @urbantis
You can reduce the space between the rich text section and the collection grid by adjusting the margin or padding in your theme’s CSS. Try adding this CSS in Online Store > Themes > Edit Code > base.css (or theme.css):
.rich-text + .collection-list {
margin-top: -20px; /* Adjust the value as needed */
}
Alternatively, in Theme Customizer, check the Padding/Margin settings for the Rich Text and Collection sections—some themes allow you to adjust spacing directly.
Thanks for your reply. I tried it in the css of the section but it did not do anything, am I missing something?
Hello @urbantis
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.
@media (min-width: 38em) {
.section.section--spacing-tall {
padding-top: 3rem !important;
padding-bottom: 2rem !important;
}
}
result
Thanks