A user seeks to reduce the top margin of buttons in their hero/banner section, providing screenshots showing the current spacing they want to adjust.
Two CSS solutions were offered:
Zeel-prajapatii’s approach: Add CSS targeting .main-slider .swiper-container .flow-type with margin-top: 20px !important and pointer event properties.
PageFly-Henry’s approach: Navigate to Online Store → Theme → Edit code, locate the slider.css file, and add CSS at the bottom targeting specific button classes (.btn--invert, .button, .fadeInUp__animate) with margin-top: 10px !important.
Both solutions use the !important flag to override existing styles. The main difference is the margin reduction amount (20px vs 10px) and the CSS selectors used. The discussion remains open with no confirmation from the original poster about which solution worked.
Hello! How can I reduce the top margin of these buttons in my hero section by just a little for visual balancing since the current margin is too tall?
https://www.tryhangoverhelper.com or https://51d86a-2.myshopify.com/
Pw: steiyi
Thank you so much in advance!
Hey @HangoverHelper please add the css.
main-slider .swiper-container flow-type .btn {
pointer-events: all;
cursor: pointer;
margin-top: 20px !important;
}
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file slider.css
Step 3: Paste the below code at bottom of the file → Save
button.btn.position-relative.btn–invert.btn–lg-disabled.animate__fadeInUp.animated.animate__animated ,
a.btn.btn–invert.animate__fadeInUp.animated.animate__animated {
margin-top: 10px !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly