Change header size in mobile version but not desktop version

Hey,
You can do this using a media query. It would look like this:

@media (max-width: 768px) {
.kad_tagline {
    font-size: 14px;
}
}

You would just paste that in your custom css box in Theme Options > Advanced Settings.

Hannah

Thank you for the help!
Unfortunately that didn’t work. I didn’t see any changes on my blog at all. I put the code in my css editor.

Would you mind posting a link to your site?

Hannah

my site is wobblebeybee.com

I’m not seeing the css in your code? It should be going in your custom css box located in Appearance > Theme Options > Advanced Settings. Is this what you’re doing? It should only have effect on screens below 768px.

Hannah

I put it in the advanced setting spot but when i refreshed my website on my phone it didn’t change the size of the tagline. I left the code in the advanced setting this time if that helps.
Thank you for working with me on this!

OK, so I’m seeing this in your css:

.kad_tagline {
    font-family: "Kotta One";
    line-height: 40px;
    font-weight: 400;
    font-style: normal;
    color: #444444;
    font-size: 30px;
}

Try removing that. You can set your font for your tagline on desktop in Theme Options > Main Settings. Then just keep the css I provided above to change the font for mobile. Does that work for you?

Hannah

Hey kylienmarks,

Hannah is close, just change her css to this and you will be set:

@media (max-width: 768px) {
.kad_tagline {
    font-size: 14px !important;
}
}

Kadence Themes

Yay! The last code worked!
Thank you both for all the help!!!