Goal: Show the “Add to cart” (Warenkorb) button next to the quantity (Anzahl) on desktop only; current absolute positioning misaligns across products.
Proposed solution: Use CSS media queries and flexbox to control layout by screen size. On desktop (>768px), set the container to display:flex, align items center, give the quantity a right margin, and keep the Add to cart button in normal flow (position: relative) aligned horizontally. On mobile (≤768px), allow wrapping/stacking and set the button to full width.
Technical notes: Media queries conditionally apply styles per breakpoint; flexbox ensures consistent horizontal alignment without absolute positioning. The provided CSS targets the shared container for the quantity input and Add to cart button and adjusts spacing and alignment.
Status: A clear CSS example was provided; no confirmation from the original poster that it resolved the issue. The discussion remains open pending feedback. Code snippet is central to understanding the recommended approach.
Hi there,
How can I display the Add to cart button (Warenkorb) next to the amount (Anzahl) in desktop view only? If I change the button to be displayed absolute instead of relative, the place is not right for every product…
https://taneraskin.com/products/orange-oat-peeling
Best,
isa
Assuming that you are referring to a specific website and want to modify the layout of the product page, one possible solution could be to use media queries in CSS to adjust the position of the “Add to cart” button based on the screen size. Here’s an example:
/* Styles for desktop view (screen width > 768px) */
@media (min-width: 768px) {
.product-form__controls-group {
display: flex;
align-items: center;
}
.product-form__controls-group .product-form__quantity {
margin-right: 1rem;
}
.product-form__controls-group .btn--add-to-cart {
position: relative;
top: unset;
left: unset;
margin-left: auto;
}
}
/* Styles for mobile view (screen width <= 768px) */
@media (max-width: 768px) {
.product-form__controls-group {
flex-wrap: wrap;
}
.product-form__controls-group .product-form__quantity {
margin-bottom: 1rem;
}
.product-form__controls-group .btn--add-to-cart {
position: relative;
top: unset;
left: unset;
width: 100%;
}
}
This CSS code assumes that the desktop view has a screen width greater than 768 pixels, and the mobile view has a screen width of 768 pixels or less. The .product-form__controls-group element is the container for the “Quantity” input field and the “Add to cart” button. In the desktop view, the container is set to display as a flexbox, with the “Quantity” field and the “Add to cart” button aligned horizontally. The “Quantity” field has a margin-right of 1rem to create some spacing between the two elements. The “Add to cart” button is set to position:relative, which allows it to be positioned relative to its normal position in the document flow.