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!
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:
Simple approach: Add CSS to the theme customizer’s Custom CSS section targeting .product__title h1 with a fixed font size (24px)
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.
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!
Hi @Kanoya
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.product__title h1 { font-size: 24px !important; }
Hi @Kanoya
Try this one.
/* 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;
}
}
And Save.
Result:
mobile
Desktop
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you! This one works well.
Thank you so much for your reply!