Taming Your Shopify Headings: How to Fix Stubborn H2 Font Sizes on Mobile

. If your theme uses the standard H2 tag without a matching class, your .h2 selector won't find anything to style.

As Titan from Shopplaza brilliantly put it, many Shopify themes "decouple visual heading size from semantic HTML level." This means something that looks like an H2 on your page might actually be a

tag or a

with a class that makes it appear like an H2. Or, it could be a real

tag that simply doesn't have class="h2" applied to it. Maximus3 further elaborated on this, noting how themes like Dwell/Horizon use "typography presets" where a visual 'H2' might be a

using type_preset: "h2".

So, the first golden rule: always inspect your elements! Right-click the heading text on your live page and select 'Inspect' (or 'Inspect Element'). This will show you the exact HTML tag and any classes or IDs it carries. If it's just

, then your selector needs to be just h2.

Beyond the Selector: Where Your CSS Lives Matters

Another critical point that Shopplaza_team and Ploqo highlighted was where Mazzah was putting their custom CSS. Mazzah had initially placed the code in a section-specific CSS box. The Shopify editor often has these handy boxes that say "Adds custom styles to this section only." If you want a change to apply across your entire store (or to all H2s, for example), you need to put it in the global Custom CSS area.

Finding the Global Custom CSS Box:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme and click Customize.
3. In the editor, look for a gear icon (Theme settings) usually in the bottom-left sidebar. Click it.
4. Select Custom CSS. This is where your global styles belong!

The Dwell Theme Specifics: Breakpoints and Specificity

Our community experts also pointed out some theme-specific nuances for Dwell (which Mazzah was using). Priyasha and Ploqo both noted that Dwell's mobile breakpoint is actually 749px, not the more common 768px. While 768px might still work for some devices, using the theme's native breakpoint ensures consistency.

Ploqo also observed that Dwell's H2 is a "flat 2.5rem (40px) at every width, with no mobile step down the way H1 has." This means it truly needs a custom mobile override if you want it to look good on smaller screens. They offered a fantastic solution that covers both the standard h2 tag and any elements styled with a .h2 class, even catching paragraphs inside the block:

@media screen and (max-width: 749px) {
  .h2,
  .h2 * {
    font-size: 22px !important;
  }
}

The !important tag is often necessary to override existing theme styles, especially when the theme's CSS has higher specificity. It's generally a last resort, but sometimes essential for quick fixes like this.

Putting It All Together: Your Step-by-Step Fix

1. Identify Your Element: Right-click the heading you want to change on your live store preview and choose 'Inspect' (or 'Inspect Element'). Note down the exact HTML tag (e.g.,

   ) and any classes it has (e.g., class="my-custom-heading").

2. Navigate to Global Custom CSS: Go to Online Store > Themes > Customize > Theme settings (gear icon) > Custom CSS.
3. Paste Your Code: Based on your inspection, use one of these options:
   • If it's a simple

     tag with no specific class, try:

     @media only screen and (max-width: 749px) {
       h2 {
         font-size: 22px !important;
       }
     }

   • If it's a Dwell theme and you want broader coverage, or if your H2s might be wrapped in other elements, use Ploqo's more robust solution:

     @media screen and (max-width: 749px) {
       .h2,
       .h2 * {
         font-size: 22px !important;
       }
     }

   • If you found a specific class (e.g., class="product-title-heading"), target that instead:

     @media only screen and (max-width: 749px) {
       .product-title-heading {
         font-size: 22px !important;
       }
     }

4. Adjust Breakpoint & Size: Change 749px to your theme's specific mobile breakpoint if different, and 22px to your desired font size.
5. Save and Refresh: Click Save in the top right of the editor. Then, do a hard refresh on your live storefront (Ctrl+F5 or Cmd+Shift+R) to ensure the changes are fully loaded. Sometimes the editor preview can be a little slow to reflect CSS changes.

Mazzah was thrilled that Ploqo's solution worked perfectly for their specific element, and it really highlights how crucial it is to understand those little details like selectors and where to place your code. Every problem like this is a learning opportunity, helping us all get a little more comfortable under the hood of our Shopify stores. Huge thanks to Ploqo, Priyasha, shopplaza_team, devcoders, Maximus3, and ashinxavier for their collective wisdom! If you're looking to start your own Shopify store and want to dive into these kinds of customizations, it's a fantastic platform to build on. You can get started with Shopify today and begin your journey into e-commerce, armed with a growing understanding of how to make your store look exactly how you want it.