how can i shift this ‘shop now’ button to its vertical and horizontal center under the text?
the button appears to be very misaligned in this section.
shopify url: genhaat.com
Topic summary
Issue: The ‘Shop Now’ button in the Sense theme’s Image with Text section is misaligned; the goal is to center it horizontally (and align it neatly under the text). Site: genhaat.com.
Proposed fixes:
- Adjust spacing in the index template by changing a margin value from 55px to 20px to reduce misalignment.
- Add CSS in Online Store > Theme > Edit code > assets/base.css (at the bottom):
• Section-specific override to remove extra spacing: #shopify-section-template–16414799888613__image-with-text .button { margin: 0 !important; }
• Center via auto margins and set top spacing: .image-with-text__content .image-with-text__text + .button { margin: 3rem auto 0; } - One reply provided only the instruction to add CSS at the bottom of base.css (via screenshot), without a specific code snippet.
Key concepts: CSS margin controls spacing; ‘auto’ horizontally centers block elements; ‘!important’ forces the style to override existing theme rules.
Status: No confirmation from the original poster; no single agreed solution. Screenshots were provided for guidance but are not essential to understand the fixes. The discussion remains open/ongoing.
1 Like
Add this css at the bottom
Online Store->Theme->Edit code
assets->base.css
Best regards,
AnhTien
Please add the following CSS code to your assets/base.css bottom of the file.
#shopify-section-template--16414799888613__image-with-text .button { margin: 0 !important;}
Thanks!
Please add below css code in bottom of assets/base.css file
.image-with-text__content .image-with-text__text+.button {
margin: 3rem auto 0;
}
Thank you.