A user wants to reposition the Buy Buttons to the bottom of the product information section on desktop view only, while keeping the mobile layout unchanged.
Current situation:
Solution provided:
CSS code using flexbox and media queries:
display: flex and flex-direction: column to the product info container@media (min-width:750px) to target desktop onlyorder: 5 on the product form element to move it to the bottomImplementation:
<style> tagsStatus: Resolved - the user confirmed the solution worked perfectly.
Hi! This is what my product information looks like in desktop view.
And I like this layout when it’s on mobile, so I’d like to keep it this way there. But on desktop view, I would want the Buy Buttons to be on the bottom of the section, like this:
Please help me with this, thanks in advance:
crescent.hu
Pw : theaba
Here is the CSS:
.product__info-container {
display: flex;
flex-direction: column;
}
.product__info-container > * {
width: 100%;
}
@media (min-width:750px) {
div:has(> product-form) {order: 5;}
}
Try it in the “Custom CSS” of the Product info section first, if not accepted, add a “Custom Liquid” section right below the “product info” and paste the code there, wrapped with <style> … </style>
The code does not affect the mobile layout.
Thank you so much! Perfect
