[FIXED] How can I move my shopify product price to another line?

Issue

I am currently trying to adjust the location of my price in shopify. On desktop view, it is to the right of the title which fits perfectly. For mobile, I want to move the price to below the title since phones don't have as much space to work with. I will insert the code below and what it looks like on mobile and desktop.

Code:

Desktop:

Mobile:

Solution

Use the CSS at the end of the CSS file

@media screen and (max-width:767px){
    .template-collection .product-details-div,
    .product-recommendations .product-details-div{ 
      flex-direction:column; 
     }


    .template-collection .product-details-div-price, 
    .product-recommendationsproduct-details-div-price {
      margin-top: 3px;
    }
}

and it looks like this if no conflict with other CSS.

Answered By - Onkar

Answer Checked By - Marie Seifert (PHPFixing Admin)