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

Blayr
Tourist
10 0 3

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

Replies 8 (8)

Dbuglabpvtltd
Shopify Partner
705 75 115

Hi @Blayr 

use add this css in theme.css file

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

banned
Zworthkey
Shopify Partner
5581 642 1572

@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;
}
}

 

 

 

Blayr
Tourist
10 0 3
This doesn't seem to be working for some reason.
Blayr
Tourist
10 0 3

This didn't work for some reason.

Blayr
Tourist
10 0 3

This doesn't work for my heading font.

EFOLI-Emilia7
Shopify Partner
316 10 38

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.

Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
Blayr
Tourist
10 0 3

This doesn't seem to be working.

wizarra
Visitor
1 0 0

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.