Change font size on product page for mobile

Store Design
1

I have spent hours trying the change the font size for my products but cannot manage it. Iv’e tried adding custom CSS snippets, code into the main theme.liquid but still no success. How can I do this? I am using the vision theme
Many thanks

Here is the link to my store: https://www.lazyluresfishing.com/

2

Hi @RVWebsitehelp

Do you want to change font size for what section?

3

Hey there! Changing the font size on your product page for mobile should be straightforward with the right CSS targeting. Here’s how to tackle it:

How to Fix It with Custom CSS1. Log in to Your Shopify Admin:

  • Go to Online Store > Themes > Edit Code.

  1. Find the Right CSS File:

    • Look for theme.css or style.css in the Assets folder.

  2. Add Mobile-Specific CSS: Add the following code at the bottom of the file:

@media (max-width: 768px) {
    .product-page-class {
        font-size: 16px !important; /* Replace with your desired size */
    }
}

  • Replace .product-page-class with the actual class name for the text you want to change. You can find it by inspecting the product page with your browser’s developer tools. Use ‘!important’ to make sure it overrides any other styles.

  • Save and Test:

    • Save the file and refresh your product page on mobile to check the changes.

If You’re Not Sure About the Class Name:- Open your product page in your browser.

  • Right-click on the text and select Inspect.
  • Look for the class attribute (e.g., class=“product-title”). Use that class name in your CSS rule.

Easier Option with EasyEdits:

If you’re tired of chasing code, you could try EasyEdits. It lets you visually change font sizes directly on your product page without needing to dive into code. Plus, you can make edits during the free trial and keep them forever—even if you decide not to continue with the app.

Let me know if you get stuck or need help finding the class name! (By the way, I’m the developer of EasyEdits, so feel free to ask any questions about it. :blush: )

4

Hello, @RVWebsitehelp

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
h1.product-title {
    font-size: 22px !important; /* increase as per your choice */
}

Thanks!

5

Hi, I don’t have theme.css or base.css. I only have theme.liquid

6

The title for each product. It’s set to 100% but cannot go any lower. I need the product titles to be made smaller for mobile

7

Thanks you but I can’t seem to find either theme.css or style.css folders

8

No worries at all, on theme.liquid you can add after head like this
9

Thanks. I will try this now. And where abouts in the code do I change the size of the font?

10

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

@media (max-width: 749px) {
.thb-product-detail .product-title { font-size: 1.8rem !important; }
}
11

You can add after padding like this