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

Store Design
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