Adjusting Heading Size for Desktop and Mobile

A common challenge with designing your section is adjusting heading sizes to look just right on both desktop and mobile screens. Often, what works for desktop can appear too large on mobile. In this guide, we'll show you how to easily adjust heading sizes separately for desktop and mobile views, creating a seamless experience for all users.

Step 1: Adding Custom CSS

You can add the following CSS to target different screen sizes.

@media (max-width: 800px) {
  h2,
  h2 strong {
    font-size: 15px !important;
  }
}

• @media (max-width: 800px) { ... }: This media query applies the styles inside it to devices with a screen width of 800px or less (commonly mobile devices).
• h2, h2 strong { font-size: 15px !important; }: This sets the font size of the h2 tag and any bold text inside it to 15px specifically for mobile devices.

Step 2: Applying the CSS

1. Go to your theme's customization options.
2. Locate the Custom CSS section.
3. Paste the code provided above into the Custom CSS box.
4. Save the changes.

Troubleshooting

• Issue: The changes don't seem to work. Solution: Ensure you are viewing the site on a mobile device or by resizing your desktop browser to see the effect of the mobile-specific CSS.
• Issue: The CSS is not taking effect. Solution: Try adding !important to the font-size property to override any other styles that might be affecting the heading size.

You can verify the changes by previewing your site on both desktop and mobile views to ensure the heading sizes are adjusted as expected.