make price font size smaller mobile only

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user wants to reduce the price font size on mobile devices only for their Shopify store.

Multiple solutions provided:

• Option 1 (theme.liquid): Add CSS code in a <style> tag before the </body> tag in theme.liquid, targeting .price__regular .price-item--regular with font-size: 12px !important within a @media screen and (max-width: 767px) query.

• Option 2 (component-price.css): Navigate to Assets > component-price.css and add similar CSS at the end of the file using @media screen and (max-width: 749px).

• Option 3 (base.css): Add the CSS code to Assets > base.css at the bottom, targeting .price-item.price-item--regular with font-size: 10px !important within a @media screen and (max-width: 767px) query.

All solutions use media queries to apply changes exclusively to mobile viewports, with slight variations in file location, breakpoint width (749px vs 767px), and font size (10px vs 12px). Screenshots showing results were included by some responders.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

hey, i would like to change to font size of the prize for mobile layout only

can you help me?

sixdreamz_0-1727425051027.png
sixdreamz_0-1727425051027.png553×542 36.1 KB

url: sixdreamz.com

password: sdc2003

1 Like
2

Hello @sixdreamz

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .price__regular .price-item--regular { font-size: 12px !important; } }

Tech_Coding_0-1727425465995.png
Tech_Coding_0-1727425465995.png319×404 18.5 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like
3

HEllo @sixdreamz
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-price.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.price__regular .price-item--regular {
font-size: 12px !important;
}

result

7.png
7.png411×541 39.1 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
4

@sixdreamz ,
Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before tag

Result:

BSSCommerceB2B_0-1727425811849.png
BSSCommerceB2B_0-1727425811849.png507×912 51.1 KB

1 Like
5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media screen and (max-width: 767px){
.price-item.price-item--regular {
font-size: 10px !important;
}
}
1 Like