problem with the font size in mobile screen

Hi there,

If you’re already using a child theme, I’d recommend adding your CSS snippets to your child theme’s style.css file. That way, when you update the parent theme, your changes will be saved! ??

I tested out the theme and the font-size change worked for all screen sizes. Can you share a link to your site so we can see what’s going on? There may some other rules that are conflicting.

This CSS should change the font size throughout:

.site {
    font-size: 14px;
}

It sounds like you’re trying to change the color of the menu toggle. This will change it when you hover over the toggle:

.menu-toggle:hover {
    background-color: pink;
    color: white;
}

If you just want to change the colour in its non-active state, this snippet will do the trick:

.menu-toggle {
    background-color: pink;
    color: white;
}

If this isn’t helpful, you may have some other CSS conflicts happening. Send us a link and we can figure out what’s going on. ??

Thanks for your reply! I got it work when added snippets you suggested to screen size as here:
@media screen and (max-width: 679px) {
.site {
font-size: 14px;
}
.menu-toggle:hover {
background-color: pink;
color: white;
}
.menu-toggle {
background-color: pink;
color: white;
}}

Lovely—I’m pleased to hear it’s working for you now! ??