Shopify themes, liquid, logos, and UX
Hey, How can i add a gap between 2 buttons and also move them but a certain amount on the X/Y-Axis See example below of how it currently looks and how I want it to look.
this can be found on homepage: https://okell-s.myshopify.com/
Password: beer
Solved! Go to the solution
This is an accepted solution.
Hi @Giorolling.
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
.banner--desktop-transparent .banner__box {
max-width: 100rem;
}
.banner__buttons {
gap: 49rem;
max-width: 100rem;
}
.banner__box {
padding: 30px 0 !important;
}
If I managed to help you then, don't forget to Like it and Mark it as Solution!
This is an accepted solution.
Hi @Giorolling.
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
.banner--desktop-transparent .banner__box {
max-width: 100rem;
}
.banner__buttons {
gap: 49rem;
max-width: 100rem;
}
.banner__box {
padding: 30px 0 !important;
}
If I managed to help you then, don't forget to Like it and Mark it as Solution!
use this code
div#Banner-template--19348940062998__image-banner .banner__buttons {
gap: 49rem;
max-width: 100rem;
}
section#shopify-section-template--19348940062998__image-banner .banner--desktop-transparent .banner__box {
max-width: 100rem;
}
where?
Go to the online store theme and go to base.css file paste the code mentiond below.
it doesnt work
Please send me screenshot base.css file.
It is working.
refresh your website and open the incognito tab.
Oh, you are correct, I see it working, but on my screen the buttons are very much off.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025