Thanks in advance!
I am looking to change the font size of my product titles on the home page and make them bold on the mobile version only. Example shown below.
password: dc
Topic summary
A user seeks to modify product title styling on their Shopify store’s homepage—specifically increasing font size and making titles bold, but only on mobile devices.
Proposed Solutions:
Multiple respondents suggest similar CSS-based approaches:
-
Method 1 (BSSCommerce-HDL): Navigate to Shopify Admin → Online Store → Themes → Edit Code, locate
theme.liquid, and insert CSS within<style>tags in the<head>section. The CSS targets.card__heading h5withfont-size: 14pxandfont-weight: boldinside a media query for screens up to 767px width. -
Method 2 (EBOOST): Similar workflow—edit
theme.liquidand add CSS before the closing</head>tag, using comparable media query targeting. -
Method 3 (suyash1): Recommends appending CSS to the end of the
base.cssfile, targeting.collection .full-unstyled-linkwithfont-size: 14pxandfont-weight: boldfor screens up to 749px.
Key Details:
All solutions rely on CSS media queries to apply changes exclusively to mobile viewports. Screenshots and code snippets (partially garbled in the input) accompany the instructions. The discussion remains technical and solution-focused, with no indication of resolution or follow-up from the original poster.
Hi @MMast ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Inside head tags. You need create style tags. After insert my code inside style tag
@media only screen and (max-width: 767px) {
.card__heading.h5 {
font-size: 14px !important;
font-weight: bold !important;
}
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
1 Like
Hi @MMast ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
-
Layout/theme.liquid
-
Add code below before tag
1 Like
@MMast - please add this css to the very end of your base.css file and check
@media screen and (max-width:749px){
.collection .full-unstyled-link{font-size: 14px; font-weight:bold;}
}