Layout placement of add to cart button design

Store Design
, ,
1

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

2

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.