How to change font size of product name and price for mobile version only (Dawn)

Store Design
1

hi all,

How to change font size of product name and price for mobile version only (Dawn)

Mu url:https://lelundijewelry.com/

Thanks

jessica_0430_1-1715797586715.png
jessica_0430_1-1715797586715.png648×1273 181 KB

2

Hi @jessica_0430 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to end of file
@media(max-width: 749px){
  body .price .price-item,
  body  .price__regular .price-item--regular,
  body  .card__heading {
    font-size: 15px !important;
  }
}
3

I did, but it is not working. Font size does not change.

4

Hi,

Where did you add it? I checked here. https://lelundijewelry.com/cdn/shop/t/1/assets/base.css?v=48209976890689617951715833208. Howerver, I don’t see code.

5

I just removed the codes coz it seems doesn’t work to me.

6

Hi,

You should be remove “}” end of file. After that add code above

Before remove

EBOOST_0-1715835568849.png
EBOOST_0-1715835568849.png1579×994 178 KB

After remove

EBOOST_2-1715835625722.png
EBOOST_2-1715835625722.png1540×981 176 KB

7

@jessica_0430 Please follow the below steps to change the font size of the product name and price for the mobile version only. Let me know whether it is helpful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click “Customize” button from the current theme.
  3. Click “Theme settings”.

Vinsinfo_1-1715845752790.png
Vinsinfo_1-1715845752790.png390×812 31.4 KB

  1. Locate “Custom CSS” field and paste the below code as like in the screenshot.
@media screen and (max-width: 750px) {
    .card__content .card__information .card__heading a, .card-information .price .price__container .price__regular .price-item--regular {
        font-size: 15px !important;
    }
}

Vinsinfo_2-1715845764169.png
Vinsinfo_2-1715845764169.png394×802 24 KB

Result will be like,

Vinsinfo_3-1715845804505.png
Vinsinfo_3-1715845804505.png331×471 28.7 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.