Product title font size (desktop view only)

Store Design
, ,

Topic summary

A user seeks to increase product title font size on desktop view only for their Shopify store (errival.com). Two solutions are provided:

Solution 1 (Moeed):

  • Navigate to Online Store → Edit Code → theme.liquid
  • Add custom CSS code above the </body> tag
  • Uses @media only screen and (min-width: 750px) to target desktop screens only
  • User confirms this solution works without affecting mobile view

Solution 2 (charliebrown):

  • Access Shopify Admin → Online Store → Themes → Edit Code
  • Open base.css or theme.css in the Assets folder
  • Add media query targeting screens with min-width: 768px
  • Adjust font-size value (example: 24px) for the .product-title class
  • Note: May need to inspect the page to identify the correct CSS class for product titles

Both approaches use CSS media queries to apply styling exclusively to desktop viewports, leaving mobile displays unchanged.

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

Product title font size (desktop view only)

I want to make my font size bigger on desktop view only can anyone help please?

url: https://errival.com/products/errival%E2%84%A2-mini-rubber-band-shotgun

Screenshot 2024-08-10 at 20.07.22.png
Screenshot 2024-08-10 at 20.07.22.png2880Ă—1640 371 KB

2

Hey @Ryan1998

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723319489820.png
Moeed_0-1723319489820.png1891Ă—936 165 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

thank you, but will that affect mobile view also?

4

@media only screen and (min-width: 750px) {

All good added this, thanks :+1:

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

6

To increase the font size of your product title on desktop view only, you can add some custom CSS. Here’s how you can do it:

Go to Shopify Admin: Click on “Online Store” and then “Themes.”

Edit Code: Find your theme, click “Actions,” and then “Edit code.”

Open CSS File: Go to the “Assets” folder and open base.css or theme.css.

Add Custom CSS: Add the following code at the end of the file:

@media only screen and (min-width: 768px) {
.product-title {
font-size: 24px; /* Adjust the size as needed */
}
}

Make sure to replace .product-title with the actual class used for your product titles. You might need to inspect the page to find the correct class.

Save Your Changes: Click “Save” to apply the update.

This code will increase the font size for the product title only on desktop screens. Adjust the font-size value to fit your needs.

1 Like