I have the following setup single product setup:

<p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol"></span>250</span></p>

<p class="stock in-stock">6</p>

<form class="cart" method="post" enctype="multipart/form-data">

.
.
.

</form>

For screen size under 768px I would like the result to look like this

[price]
[stock]
[qty + add_to_cart]

But it stacks like this:

[price]
[qty + add_to_cart] [stock]

This is my css:

@media (max-width: 768px) {


  .woocommerce div.product p.price {
  text-align: right;
  }

  .woocommerce div.product form.cart, 
  .woocommerce div.product p.cart {
    float: right;
  }

  .woocommerce div.product p.stock {
    float: right;
  }

}

How can I stack the them on top of each other?

Read more here: Woocommerce responsive float issue


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: