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

New Member
9 0 0

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.

This is for the mobile view

@_media screen and (max-width: 800px) {
.product-details-div-price {
font-size: .8em;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;

Reply 1 (1)
New Member
9 0 0

I fixed this by adding this code to the end of my CSS file.

@_media screen and (max-width:767px){
    .template-collection .product-details-div{ flex-direction:column; }
    .template-collection .product-details-div-price{margin-top: 3px;}