Hi!
I need help aligning the buttons based on my picture.
https://nothingchanges.com.my/
Thanks in advance!
Topic summary
A user seeks help aligning two buttons on their Shopify store homepage to match a provided screenshot showing desired left-right positioning.
Initial Solutions Attempted:
- One suggestion involved increasing the
.banner__boxmax-width from 95rem to 97rem via CSS media query in base.css, but this did not resolve the issue.
Working Solution:
- A contributor provided custom CSS targeting the specific banner element:
- Added a large gap value (72rem) between buttons
- Centered button justification
- Code placed at the end of base.css file
Outcome:
The issue was successfully resolved using the gap-based CSS approach. The original poster confirmed the solution worked as intended.
1 Like
Hello! I see what you’re aiming for with the button alignment totally doable. I can get that cleaned up and aligned just like in your screenshot. Let me know if you’d like me to jump in. I can take care of it for you as a quick commission.
Hey @nothingchanges ,
In order to change the position of the first button to the left side then you need to ensure that the max-width of the buttons increase. Currently it’s 95rem but if you could make it sometime 97rem then your requirements sure fulfill.
Paste the following code in the end of base.css file.
@media screen and (min-width: 1400px) {
.banner__box {
max-width: 97rem !important;
}
}
Results:
1 Like
Thank you for the reply.
Unfortunately, it is still the same after i paste the code. Is there any other possible solution?
Hello @nothingchanges
- From your Shopify Admin, navigate to Online Store > Themes > Edit Code
- In the Assets folder, open base.css and add your CSS code at the end
div#Banner-template--24573836820843__image_banner_nWqxB7 .banner__buttons {
gap: 72rem !important;
justify-content: center;
}
2 Likes
Hello
I attached a file with the response you can check it and take action in
YOU ARE AWESOME! THANK YOU SO MUCH!
1 Like