Currently my product page buttons are stacked on both mobile an desktop: https://cocoandbundle.com.au/collections/mushie/products/snack-cup-natural
How can i place them side by side on desktop but stacked on mobile?
Topic summary
A user seeks to reposition product page buttons from stacked to side-by-side on desktop while keeping them stacked on mobile. They also want to ensure both buttons match in size.
Current Issue:
- Buttons are stacked on both mobile and desktop views
- The Shop Pay button appears smaller than the Add to Cart button
Solution Provided:
A responder offers custom CSS code to be added to the theme’s stylesheet.css file. The code includes:
- Media query targeting desktop screens (min-width: 1024px)
- Flexbox layout for button container
- Width adjustments (45% each) with spacing
- Height standardization for the Shop Pay button
Implementation Steps:
- Navigate to Shopify Admin → Online Store → Themes → Edit Code
- Open stylesheet.css file
- Add the provided CSS code at the bottom
Status: Solution provided, awaiting confirmation from original poster on whether it resolves the issue.
1 Like
Would you like the buttons to appear like this on the desktop screen? Please refer to the screenshot for clarification.
1 Like
yes that’s correct!
I can see the shop purple shop button is slightly smaller than the add to cart button? how can i get them to match as well?
Hi @zoeeblightt
Please follow these steps to add the custom CSS:
Step 1: Go to Shopify Admin → Online Store → Themes → Edit Code.
Step 2: Open the file stylesheet.css
Step 3: Scroll to the bottom of the base.css file and insert this code:
@media (min-width: 1024px) {
.product__section-details form{
display: flex;
}
.product-add {
width: 45%;
margin-right: 30px;
}
.gravity-button {
height: 55px !important;
}
.product__section-details form .shopify-payment-button {
width: 45%;
}
}
Hope this helps! 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you! 
1 Like