How to adjust the size of the title?

Shopify Discussion
, ,

Topic summary

A user needed to adjust the font size of a product title in their Shopify theme but only for desktop view, as initial CSS changes affected mobile displays as well.

Initial Solution:

  • Basic CSS targeting .product__title h1 with custom font-size was suggested
  • This approach changed both desktop and mobile views

Desktop-Only Fix:
The solution involved using CSS media queries to limit changes to desktop screens:

  • @media screen and (min-width: 750px) for standard desktop breakpoint
  • Alternative breakpoints suggested: 768px or 990px depending on the specific mobile screen width

Resolution:
The user confirmed the media query approach worked successfully, resolving the issue while preserving the mobile layout.

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

Hello guys, how can I adjust the size of this title?

1.png
1.png1376×557 184 KB

1 Like
2

Hi @NikosBat

yes we can

let try to add custom CSS as:

.product__title h1 {
  font-size: 25px;
}

The size you can fill as you want.

This code maybe not exactly work on your theme so it will better to give you solution if you can share me the site url & password (if applicable)

1 Like
3

Hello and thanks for your answer, the thing is that if I paste this code in the CSS, then the mobile version Titel gets too big. Is there any other solution only for desktop users?

1 Like
4

yes you can limit for desktop screen only by this code:

@media screen and (min-width: 750px){
  .product__title h1 {
    font-size: 25px;
  }
}
1 Like
5

hey @NikosBat try this

1 Like
6

Hey there, for some reason if I add this code to my CSS, the mobile view changes too.

7

You can adjust the title size by modifying the CSS associated with it. Look for the class or ID in your theme’s CSS file and change the font-size property—for example, font-size: 32px;. If you’re unsure where to place the code, you can add it in Online Store > Themes > Edit Code > Assets > theme.css or similar, depending on your theme.

1 Like
8

Thanks for your answer, this changes nothing for me.

9

what is the screen width of your mobile screen?
if it larger 768px you can use:

@media screen and (min-width: 768px){
  .product__title h1 {
    font-size: 25px;
  }
}

if it larger 990px you can try:

@media screen and (min-width: 990px){
  .product__title h1 {
    font-size: 25px;
  }
}
1 Like
10

Hello thank you very much I appreciate it.

11

Hello, thank you I appreciate it.

12

Hi @NikosBat

Does it work as expectation?

1 Like
13

Yes it works, thank you once again.

14

Thank you for your confirmation. Let me know if you need any other help.

If it’s helpful, don’t forget to mark it as acception.

1 Like