I want to change the title size on my product page on mobile and on desktop

Store Design
, , , ,

Topic summary

A user seeks to customize product page title sizes differently for mobile and desktop views on their Shopify store.

Solutions Provided:

Two community members offered CSS code snippets to address this:

  • Desktop-only approach: Add CSS targeting screens with minimum width of 749px, setting the .product__title h1 font-size to 30px

  • Comprehensive approach: Use media queries to set different sizes:

    • Mobile (max-width: 749px): 20px font-size
    • Desktop (min-width: 750px): 30px font-size

Implementation Steps:

  1. Navigate to Shopify admin → Online Store → Themes
  2. Click Actions → Edit code
  3. Locate base.css, style.css, or theme.css in the Assets folder
  4. Add the provided CSS code at the bottom of the file
  5. Adjust pixel values as desired
  6. Save changes

Outcome: The solution was confirmed working by the original poster, who marked it as resolved.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi I want to reduce the size of my product page’s title on mobile and on desktop ! I want to choose the size myself ! Here is my product page’s website link : https://www.five-pocket.com/products/pro-club-heavyweight-cotton-tshirt-white

Capture d’écran 2024-02-01 à 20.17.56.png
Capture d’écran 2024-02-01 à 20.17.56.png1346×782 62.9 KB

1 Like
2

Hi @imazele

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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: 749px){
.product__title h1 {
    font-size: 30px;
}
}

And save.

Result:

Made4uoRibe_0-1706817854992.png
Made4uoRibe_0-1706817854992.png633×202 5.35 KB

This size only in the desktop view.

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

3

Add this code in your base.css:

@media (max-width: 749px) {
  .product__title h1 {
    font-size: 20px !important;
  }
}
@media (min-width: 750px) {
  .product__title h1 {
    font-size: 30px !important;
  }
}

Edit the pixels of the font-size to increase or decrease the text size. The first font-size applies to mobile devices, and the second font-size applies to PC devices.

Result:

1.PNG
1.PNG272×699 117 KB

3 Likes
4

:nerd_face: it worked! Thank you so much

1 Like