Shopify Custom CSS Not Working? How to Override H2 Font Size for Mobile

). However, an actual HTML heading tag is simply

. 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. The key takeaway here is to always inspect the element using your browser's developer tools (right-click on the element and select "Inspect") to see its actual HTML tag and any classes it might have.

Solution for Selectors:

If you're targeting a standard HTML

tag, use:

h2 { /* ... styles ... */ }

If the H2 content is nested within a container that has the class .h2, or if the H2 itself has that class, a more robust selector might be needed, as suggested by Ploqo:

.h2, .h2 * { /* ... styles ... */ }

This targets both the element with the class .h2 and any child elements within it, covering more bases.

Where to Put Your Custom CSS: Global vs. Section-Specific

Another critical point raised by Shopplaza_team was the placement of the custom CSS. Shopify's theme editor offers multiple places to add CSS, and understanding their scope is vital:

• Section-Specific Custom CSS: When you add CSS within the settings of a particular section (e.g., a "Pull Quote" section), that CSS only applies to that specific instance of the section. The editor panel often explicitly states, "Adds custom styles to this section only." This is great for highly localized tweaks but won't affect similar elements elsewhere on your site.
• Theme Settings > Custom CSS: This is where you should place global CSS changes that you want to apply across your entire store. To access it, navigate to Online Store > Themes > Customize, then click the gear icon (Theme settings) in the bottom left, and select Custom CSS. Any code here will override default theme styles sitewide.

Mazzah had initially placed the code in a section-specific box, which explained why it wasn't having the desired global effect.

Understanding Media Queries and Theme Breakpoints

Responsive design is non-negotiable for modern e-commerce. Media queries allow you to apply different styles based on screen size, device type, and other characteristics. Mazzah's original code used max-width: 768px, a common breakpoint. However, as Priyasha and Ploqo pointed out, the Dwell theme specifically uses 749px as its mobile breakpoint. A slight mismatch like this can prevent your styles from kicking in at the exact moment you expect them to.

Always check your theme's documentation or inspect the live site's CSS to confirm the exact breakpoints it uses. Consistency is key for a seamless mobile experience.

The !important Declaration: Use with Caution

The !important declaration in CSS forces a style to take precedence over others, regardless of specificity. While it can be a quick fix to ensure your styles apply, it's generally considered bad practice if overused. It can make your CSS harder to maintain and debug later on, as it breaks the natural cascade of styles. In many cases, a more specific selector can achieve the same result without needing !important.

However, in scenarios where theme styles are highly specific or inline, !important might be necessary as a last resort to override them. Mazzah's solution ultimately used it, which is acceptable when other options prove too complex for a simple override.

The Comprehensive Solution for Mobile H2 Font Size on Dwell Theme

Combining all the insights, here's the refined, working solution that Mazzah found success with, applicable to many Shopify themes:

1. Navigate to Theme Settings: From your Shopify admin, go to Online Store > Themes > Customize.
2. Access Custom CSS: Click the gear icon (Theme settings) in the bottom left corner, then select Custom CSS.
3. Paste the Code: Insert the following CSS, adjusting the font size and breakpoint as needed for your specific theme (Dwell uses 749px):

@media screen and (max-width: 749px) {
  h2 { /* Or .h2, .h2 * if inspecting reveals a class wrapper */
    font-size: 22px !important; /* Adjust 22px to your desired size */
  }
}

Remember to click Save in the top right corner of the theme editor and then perform a hard refresh on your live storefront to see the changes.

Best Practices for Shopify Custom CSS

• Always Inspect: Use browser developer tools to understand the HTML structure and existing CSS of the elements you want to style. This is your most powerful debugging tool.
• Test Thoroughly: After any CSS changes, test your store on various devices and screen sizes to ensure everything looks as intended.
• Document Your Changes: Add comments to your custom CSS to explain what each block of code does. This helps you or another developer understand and maintain it later.
• Consider Theme Updates: Major theme updates can sometimes affect custom CSS, especially if they restructure HTML or change class names. Be prepared to re-evaluate your custom styles after an update.
• When in Doubt, Hire an Expert: For complex customizations, or if you're migrating an existing store to Shopify and need a seamless design transfer, don't hesitate to reach out to professionals. At Shopping Cart Mover, we specialize in ensuring your store looks and functions perfectly, whether it's a simple CSS tweak or a full platform migration.

Mastering custom CSS on Shopify takes practice, but understanding these fundamental principles—selectors, placement, and responsive design—will save you countless hours of frustration. This particular H2 font size puzzle highlights how a few small details can make all the difference. Keep learning, keep experimenting, and soon you'll be styling your Shopify store with confidence. If you're looking to start your own online store or need help with an existing one, Shopify offers a robust and user-friendly platform that can be customized to your heart's content. And for those bigger projects, remember Shopping Cart Mover is here to help with all your development and migration needs!