How can I adjust the heading font size for mobile view only?

Store Design

Topic summary

A user needs to reduce oversized heading fonts on mobile devices across their Shopify store (openrangeangus.com). Multiple solutions were provided involving CSS media queries targeting h2 elements.

Proposed Solutions:

  • Add CSS code to theme.css or theme.scss files using @media screen and (max-width: 580-768px) targeting .h2, h2 elements
  • One suggestion targeted navigation links specifically via span.site-nav--link-text
  • All solutions use !important flag to override existing styles

Current Status:

  • The original poster reported none of the suggested CSS codes worked on their site
  • Another user experienced the same issue with unsuccessful attempts
  • One user confirmed success after 2 weeks of trying different solutions
  • A follow-up question emerged about targeting individual h2 elements with different class names separately

The discussion remains partially unresolved, with conflicting results among users attempting the same CSS modifications.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I have read and tried SO many css codes on discussion to fix this, but none of it is working on my site for some reason.

My heading font size is giant on mobile and I need to reduce it throughout the website.

How do I do that? https://openrangeangus.com

2

Hi @Blayr

use add this css in theme.css file

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

2 Likes
3

@Blayr

  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/theme.css or theme.scss->paste below code at the bottom of the file.
  3. Save it.
@media screen and (max-width: 600px) {
.h2, h2 {
font-size: 20px !important;
}
}
4

Hello @Blayr

add this code to your “inspector-stylesheet” file.

Navigate to online store >> Click edit theme code.

Now find “inspector-stylesheet” and paste the following code:

@media (max-width: 768px){
	span.site-nav--link-text {
    font-size: 20px !important; }
}

Hope it helps.

5

This doesn’t seem to be working for some reason.

6

This didn’t work for some reason.

7

This doesn’t seem to be working.

8

This doesn’t work for my heading font.

9

Hi. I am having the same issue. I’ve tried all of the suggestions to edit ccs code but nothing is working. Please advise. Thank you.

10

thank you so much it took me 2 weeks to find this code everything else wasnt working. thank you!

11

Any idea how to do this for each specific heading? for example I got about four h2’s but with different class names so I want to change sizes for all seperately, thanks