Mobile collection price location

Store Design
, ,
1

Hi all,

On mobile, my price gets cramped with the product title. Is it possible to move the price underneath the title, only on mobile? Just to break up the flow of the page?

https://cncours.com/collections/frontpage

Thanks!

2

Hi @csmithco ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723483245595.png
BSSCommerceHDL_0-1723483245595.png1915×506 50.7 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Thank you! Perfect

4

@csmithco No problem, Have a good day :heart_eyes:

5

  1. Go to online store → theme → edit code.

  2. Open componet-price.css.

@media screen and (min-width: 750px) {

.price {
margin-top: 0.7rem !important

}

}

6

Is there any way to make it drop one more line down? Just to create some space between the title and the price? Thanks!

7

Hi @csmithco ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723543655855.png
BSSCommerceHDL_0-1723543655855.png1905×548 56.3 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

8

Sadly this isn’t working for me!

9

Pls try again this code:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

10

Amazing, works well. Thanks again.

11

@csmithco , I am happy to always support you. Have a good day :heart_eyes: