Add To Cart and Variant Pills Mojave Theme

[Proud-Dreamer]

Hi there,

I'm trying to make the add to cart button full width as i removed the quanity variant pill on my mojave theme and also remove the size text from the variant pills to make it all in one row as everything doesn't look tidy at all, please let me know what I can do to fix this.

Much Appreciated

[GemPages]

Hello @Proud-Dreamer 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[Proud-Dreamer]

the page url is here, https://proudtobeadreamer.com/ and im pretty sure the passcode is unlocked but if not it should be stawng.

Thanks

[Dan-From-Ryviu]

Hi @Proud-Dreamer,

You can do that by adding this CSS code at the bottom of base.css file in Online store > Themes > Edit codes > Assets  

.main-product__form-grid {
grid-template-columns: max-content !important;
grid-gap: 1.6rem 0 !important;
}

[Proud-Dreamer]

i just put it in the code thank you so much it actually worked, now how can i remove the arrow that it shows in the add to cart button and also fix up the variant pills so it doesnt show up messy like how it was.

[Dan-From-Ryviu]

Hi, to remove arrow, please add this CSS code 

.main-product__form-grid .button>svg { display: none !important; }

I'm not sure about your request to fix up the variant

[Proud-Dreamer]

okay it worked to removed the arrow im just trying to figure out how the layout of the size buttons shown here like the xs - xxxl i want them to all be in a straight line. How can i do that?