Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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;
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;}
}