Title and tagline won’t resize on mobile site

Hi,
Can you please provide a link?
Thanks!

Hannah

The website is https://veggievagabonds.com/

If you visit the page from a computer and then a mobile phone you will see the title and tagline stay the same size and won’t fit on the topbar in the mobile site.

Thanks

Looks like you’ve added this css:

.kad-mobile-header-height {
    height: 52px;
}

That is throwing your mobile header off. What is your reason for adding that?

Hannah

Thanks Hannah,

I didn’t realise I had added.

If I take it out will solve the problem?

And how can I take it out? Thanks

Yes, removing should solve your problem. Appearance > Theme Options > Custom CSS.

Hannah

Hi Hannah, there’s no coding in the CSS box but I’m still having the same issue. The title and tagline are still too big for the topbar on the mobile sites.

I’m still seeing this in your css from theme options > custom css:

.kad-mobile-header-height {
    height: 66px;
}

Do you see that in there?

Hannah

in the theme options > custom css there is nothing there.

Am I looking in the right place? From the dashboard > appearance > theme options > custom css?

Thanks for your patience ??

Strange. Ok, try adding this in that place (custom css box):

.kad-mobile-header-height {
    height: auto !important;
}

Let me know if that works!

Hannah

thanks, that has adjusted the height of the topbar but is there a way of lowering the font size so it doesn’t take up as much room, or removing the tagline from the mobile site? For a phone view it takes almost 1/4 of the screen.

You can remove the site tagline on mobile with this css:

@media (max-width: 768px) {
span.kad-site-tagline {
    display: none;
}
}

Hannah