Goal: Reduce the vertical space between the “Huge Sale” banner and the images above on the homepage.
Context: The poster previously removed a “flush” term from code to create a gap but needed it smaller and wasn’t sure how to proceed.
Solution provided: Add a CSS rule at the bottom of theme.css targeting the specific Shopify section ID to set margin-top to 0px, and adjust the pixel value as needed to control spacing.
Technical note: margin-top in CSS controls vertical spacing above an element; placing the rule at the end of theme.css helps ensure it overrides existing styles for that section.
Outcome: A screenshot was shared demonstrating the reduced space, and the original poster confirmed the fix worked.
Status: Resolved; no further actions or disagreements noted.
PW: rtaong
I’m trying to decrease the buffer between the “huge sale” image and the images above on the homepage.
I managed to create a gap by deleting the word flush I found somewhere in the code. but don’t know how to make it smaller.
I tried to follow @Michael_Pink response on a similar post but wasn’t too sure if that is what I need to do.
Many thanks!
If you want to reduce space above the Sale banner, try adding this code to the bottom of theme.css
#shopify-section-template--14393258737706__16433241275c185256 .section {
margin-top:0px;
}
You can adjust the margin to your preference.
Result:
Thank you very much!
