How to change font size for my product title Ride theme

Topic summary

A user needed to reduce the product title font size on their Shopify store using the Ride theme, particularly for mobile devices where it appeared too large.

Solutions Provided:

Two CSS-based solutions were offered:

  1. Simple approach: Add CSS to the theme customizer’s Custom CSS section targeting .product__title h1 with a fixed font size (24px)

  2. Responsive approach: Add CSS code to the theme’s stylesheet (base.css/style.css/theme.css) with separate font sizes for desktop (30px) and mobile screens (20px using a media query for screens under 749px)

Resolution:

The user confirmed the responsive solution worked successfully. The discussion included visual examples showing the before/after results on both mobile and desktop views.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

How to decrease the font size for the product title on the product page? For example sugarplumstore(dot)net/products/meow-fruit-swan-fantasy-2-0-princess-elegant-prom-dress

It’s too big, especially on the phone.

Thank you in advance!

2 Likes

Hi @Kanoya

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.product__title h1 { font-size: 24px !important; }
1 Like

Hi @Kanoya

Try this one.

  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:
/* size for desktop screen */
.product__title h1 {
    font-size: 30px;
}
/* size for mobile screen  */
@media only screen and (max-width: 749px){
    .product__title h1 {
    font-size: 20px;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

Thank you! This one works well.

Thank you so much for your reply!