Can’t change title font size in mobile version

I don’t see the title taking up two lines right now for me when resizing but maybe you had a longer one initially. The following CSS in Appearance->Customize->Additional CSS should change it though

.mobile-menu .slicknav_brand .site-title {
    font-size: 15px;
}

You can then just adjust the 15 number to whatever works for you

Thanks @jarretc! That worked. However, I’m realizing that the header at the top of the mobile version (the white part where the site title is) is taking up too much space also. Do you know how to make it smaller without changing the desktop and tablet version?

Try out this CSS

@media (max-width: 991px) {
    .slicknav_menu {
        height: 75px;
        margin-top: -30px;
    }
}

@media (max-width: 991px) {
    .slicknav_brand {
        height: 75px;
    }
}

The first section handles the height of the whitespace and the section section handles moving up the menu so that it displays directly under the white area without any space.

This worked too. Thanks so much for your help! I really appreciate it.

@jarretc Sorry I just had one more question! The header background image (of the purple flower and food) isn’t resizing on mobile, so it just looks like a large gray rectangular space. Do you know how to get it to fit to mobile and where the code would go?

Hmm, try this CSS

@media (max-width: 991px) {
    .page-title {
        background-size: contain;
        background-repeat: no-repeat;
    }
}

Thanks so much again! That worked.