Change Font Size Of Price On Home Page for Mobile View Only (Dawn Theme)

Store Design
1

Hi, I would like to change the font size of price on home page (featured collection) for the mobile view only as it is currently too big on mobile view.

2

Hi @softsplendor ,

Would you mind to share your URL website with password if its protected?

Thanks!

3

Hi, url is www.softsplendor.com and pw: peifea. Thanks

4

Hi @softsplendor ,

Thank you for the information, try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 749px){
.card-information .price {
    font-size: 12px;
}
}

Result:

Ribe_Dagandara_0-1687077523687.png
Ribe_Dagandara_0-1687077523687.png748Ă—531 310 KB

I hope it help.

5

Hi, I just tried the method but the font size of price didn’t change on my mobile view. Attached is the screenshot on my mobile view.

6

IMG_0514.jpeg
IMG_0514.jpeg1125Ă—1174 134 KB

7

Oh, maybe we cna try this.

@media only screen and (max-width: 749px){
.price {
    font-size: 1.2rem !important;
}
}

Result:

Ribe_Dagandara_0-1687081491027.png
Ribe_Dagandara_0-1687081491027.png436Ă—501 212 KB

8

Hi, I just saved and the font size has become smaller on mobile view in my shopify admin but the font size of price didn’t change when I view it on my own mobile phone.

9

I think you didnt notice it cause the original size before I change is 1.5rem.. and I change into 1.2rem you can change the sizes you like.. In my mobile view the Title are getting smaller on screen, but I didnt edit or give you the code for title only the price.

10

Hi, it finally worked after I pasted the code directly under the custom css section instead of the base.css file. Thanks for the help!!

IMG_0515.jpeg
IMG_0515.jpeg1125Ă—2304 140 KB

11

Thats good then. Your welcome. :blush: