Hey there, fellow store owners! It's me, your friendly Shopify expert, dropping in with some insights from the community forums. We've all been there: you're trying to make a small tweak to your store's design, something that seems super simple, and it just refuses to cooperate. Recently, a thread popped up that perfectly illustrates one of these common head-scratchers, and the collective wisdom shared there is pure gold for anyone dabbling in custom CSS.

Our friend @Mazzah started a discussion titled "Unable to get custom CSS to override h2 font-size" because they were tearing their hair out trying to shrink the H2 headings on mobile. They had some code ready to go, using .h2 and even an !important tag, but nothing seemed to stick. Sound familiar? Let's dive into what the community uncovered.

The Great Selector Mix-Up: .h2 vs. h2

This was the absolute core of Mazzah's problem, and it's a mistake even seasoned developers make sometimes. As several community members like @Priyasha, @devcoders, and @shopplaza_team quickly pointed out, there's a crucial difference between .h2 and h2 in CSS:

• .h2 (with a dot): This targets elements that have a class named "h2." So, it would apply to something like

  My Styled Heading

  .
• h2 (no dot): This targets the actual HTML element tag

  . So, it would apply to something like

  My Actual H2 Heading

  .

Many Shopify themes, including the Dwell theme Mazzah was using, often style their headings using the actual HTML tags (

,

, etc.) rather than assigning a class like "h2" to them. So, Mazzah's .h2 selector wasn't finding anything to change!

Adding to this, @Maximus3 brought up an excellent point: themes like Dwell or Horizon use "typography presets." This means something that looks like an H2 in the visual editor might actually be a

tag with a visual H2 preset, or even an

styled to look like an H2. This is why always inspecting the element in your browser's DevTools is your best friend!

Where to Put Your Custom CSS: Global vs. Local

Another common pitfall Mazzah encountered was where they were adding their CSS. As @shopplaza_team and @Ploqo wisely noted, the custom CSS box inside a specific section only applies styles to that one section. If you want a change to affect all H2s (or any other element) across your entire store, you need to put it in Theme Settings > Custom CSS. This is the global stylesheet for your theme.

Here's how to navigate there:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme and click Customize.
3. In the editor, click the gear icon (Theme settings) in the bottom left sidebar.
4. Select Custom CSS.
5. Paste your code here and click Save at the top right.

The Solution That Worked: Ploqo's Magic Touch

While many suggested simply changing .h2 to h2, @Ploqo went a step further, providing a solution that Mazzah confirmed worked perfectly. Ploqo's code addresses potential scenarios where the H2 styling might be nested or applied via a class that's *also* using the H2 tag, or even to a paragraph inside an H2 block.

Here’s the code that did the trick (remember to put this in Theme Settings > Custom CSS):

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

Let's break down why this is so effective:

• @media screen and (max-width: 749px): This is your media query, ensuring the styles only apply to screens 749 pixels wide or smaller (i.e., mobile devices). It's crucial to note that Dwell's specific mobile breakpoint is 749px, not the more common 768px. Using the theme's actual breakpoint helps avoid inconsistencies.
• .h2, .h2 *: This is the clever part. It targets any element with class="h2" (.h2) AND any child element *inside* an element with class="h2" (.h2 *). This covers a wider range of possibilities, ensuring the style catches whatever element is actually rendering the text you want to change.
• font-size: 22px !important;: This sets the font size. The !important flag tells the browser to prioritize this style over other conflicting styles, which is often necessary when overriding theme defaults. While generally advised to use sparingly, for specific overrides like this, it can be a quick and effective fix.

This approach ensures that whether your theme uses a direct

tag, a

, or even a

inside a styled container, your custom font size will likely apply.

Quick Tips for Debugging CSS

Whenever you're facing CSS woes, remember these steps:

1. Inspect Element: Right-click on the text you want to change in your browser and select "Inspect" (or "Inspect Element"). This opens DevTools, where you can see the exact HTML tag, classes, and styles applied to that element. This is how you'll know if it's an

   , a

   , or something else entirely.

2. Hard Refresh: After saving your CSS, always do a hard refresh of your storefront (Ctrl+F5 or Cmd+Shift+R). Sometimes the browser or even the editor's preview pane can cache old styles.
3. Check Breakpoints: Be aware of your theme's specific mobile breakpoints. While 768px is common, many themes use slightly different values like Dwell's 749px.

Mazzah's journey is a fantastic example of how the Shopify community comes together to solve real-world problems. It highlights that CSS can be tricky, especially with modern themes that decouple semantic HTML from visual styling. But with a bit of expert guidance and the right tools (like your browser's DevTools!), you can overcome these hurdles and get your store looking exactly how you envision it. Every little problem we solve helps us understand the intricate dance of classes and tags a little better, and that's what makes us all better store builders!