I want to reduce the size of my product title on my product pages

Store Design
, ,

Topic summary

A user seeks to customize the product title font size on their Shopify product pages, wanting control over both desktop and mobile displays.

Initial Solution (Desktop Only):

  • Add CSS code to base.css targeting .product__title h1 with font-size: 3rem within a media query for screens min-width 750px.

Mobile Implementation Challenge:

  • User requests mobile customization as well.
  • Multiple contributors provide CSS snippets, but initial mobile code doesn’t work.

Revised Mobile Solution:

  • Replace with simpler CSS: .product__title h1 { font-size: 3rem; } without media query restrictions.
  • Contributors note that larger font sizes are recommended for mobile readability.

Resolution:

  • After inspection and troubleshooting, the code is confirmed working on the user’s website.
  • User eventually resolves the issue independently and confirms success.
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I want to reduce the size of my product title in my products pages (I want to be able to choose the size myself)

Here is the link of one of my product page : https://www.five-pocket.com/products/pro-club-heavyweight-cotton-tshirt-white

Thanks

1 Like
2

Hi @imazele

YOu can adjust the size whatever you prefer, this code is only on the desktop screen. I didnt include the mobile title size.

  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, style.css or theme.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:
@media only screen and (min-width: 750px) {
    .product__title h1 {
        font-size: 3rem;
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Can you also do it on mobile ? I want both please !

4

Hi, yes you can do that.

just add the following code in your base.css file for desktop

@media only screen and (min-width: 750px) {
    .product__title h1 {
        font-size: 30px;
    }
}

and for mobile add the following code:

.product__title h1 {
   font-size: 30px;
}
5

Doesn’t work for mobile

6

Replace on this one.

.product__title h1 {
        font-size: 3rem;
    }

Andf Save.

Same instruction.

For mobile screens, it is advisable to use a larger font size to ensure readability on smaller devices.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

7

Hi @imazele ,

This should work on mobile.

Please confirm if you have added the above code at the end of base.css file. If you have added the code then sent me the link so that I can inspect the website and check why it is not working.

Thanks

8

here is my website link. still doesn’t work on mobile. https://www.five-pocket.com/products/pro-club-heavyweight-cotton-tshirt-white?variant=48361426190685

9

Hi, I have inspected your website and it seems that code is working correctly. Please refer to the image below. Have you added this code right now??

abdulmoeed37_0-1733764812103.png
abdulmoeed37_0-1733764812103.png384Ă—262 18.7 KB

10

yeah i find it myself thanks!