Make pricing font size smaller

Store Design
, , ,

Topic summary

A user seeks to reduce the font size of product pricing on mobile devices, specifically for the price displayed below the rating on their product page.

Multiple CSS Solutions Provided:

Several respondents offered similar approaches, all involving adding custom CSS to the base.css file:

  • Target the .price-item--regular class within a media query for mobile screens (max-width: 600px or 768px)
  • Use !important to override existing styles
  • Adjust font-size to smaller values (15px, 16px, or 1.6rem)

Implementation Steps:

  1. Navigate to Online Store > Themes > Actions > Edit Code
  2. Open Asset > base.css
  3. Paste the provided CSS code at the end of the file

Screenshots demonstrate the expected visual result with reduced pricing font size on mobile. The discussion remains open with no confirmation from the original poster about which solution was implemented or whether the issue was resolved.

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

Hi, how do you make the font size for the pricing on the mobile version smaller? It only has to be for the pricing at the top just below the rating. The website is: https://vinup.nl/en/products/vinyl-record-rack

VinUp_0-1739440219931.png
VinUp_0-1739440219931.png465×872 135 KB

2

Hi @VinUp

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
@media (max-width: 768px) {
s.price-item.price-item--regular {
    font-size: 15px !important;
}
}

Result:

LizHoang_0-1739440452360.png
LizHoang_0-1739440452360.png439×620 76.1 KB

Best,

Liz

3

Add This Code In Edit Code > Base.css File

@media only screen and (max-width: 600px) {
  body .product .price--on-sale .price-item--regular, body .product .price .price-item {
     font-size: 16px !important;
  }
}
4

Hello @VinUp ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:768px){
.price-item.price-item--regular {
    font-size: 1.6rem !important;
}
.price.price--large.price--on-sale.price--show-badge span {
    font-size: 1.6rem !important;
}
}

ZestardTech_0-1739442762761.png
ZestardTech_0-1739442762761.png429×667 93.3 KB

Let me know if you need further assistance!

1 Like
5

Add this code in edit code > base.css and add this code at the end of the file

@media only screen and (max-width: 600px) {
  body .product .price--on-sale .price-item--regular, body .product .price .price-item {
     font-size: 16px !important;
  }
}
1 Like