Mobile Menu Fonts Too Small

Support
#1

I’m receiving a lot of errors on Google Mobile Friendly Test because the menu fonts on https://deconstructingyourself.com are too small on mobile.

How can I increase the menu font size on mobile only?

Thanks.

#2

Hello @Oortcloudatlas,

Thanks for writing in!

Your current menu font size is 13 pixels because of this code:

.x-navbar .desktop .x-nav > li > a {
    font-size: 13px;
}

To increase it on mobile, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  .x-navbar .desktop .x-nav > li > a {
    font-size: 13px;
  }
}

Hope this helps. Please let us know how it goes.

#3

Actually, this didn’t fix the problem at all.

#4

Hi @Oortcloudatlas,

I’ve tested the site on Google Mobile-Friendly test and I don’t get the menu fonts are too small on mobile error. The site is actually a mobile-friendly, with 14px of mobile menu font.

Maybe it is referring to the menu that is on the footer as it only 11px. You can adjust that by adding this to Theme Options > CSS

@media (max-width: 480px) {
	.x-colophon.bottom .x-nav {
		font-size: 14px;
	}
}

Thanks,

#5

The front page gets that green light, but if you do a test for the whole site, you get this:

#6

Hi @Oortcloudatlas,

We cannot do a whole site test because it requires domain verification. Only owner of the domain can do that. To help you better at this point, please share the results of your whole site test. We can review those information and check in relation to actual pages. Then maybe give you more detailed suggestion after. Thank you.

#7

Do you want the CSV download of the report or what?

#8

Hi @Oortcloudatlas,

Sorry, but you need to provide more information about the issue, because on our test the site gets the green light (Page is mobile friendly), it does not matter if its only the front page tested because your site pages use the same mobile menu.

If the issue is really the “Mobile Menu Fonts Too Small” then you can increase that by adding this to Theme Options > CSS

.x-navbar .mobile .x-nav li>a {
	font-size: 18px;
}

Feel free to adjust the 18px value. If that CSS did not increase the mobile menu font size please check your entire custom CSS here and resolve all found errors (you can ignore the warning).

We understand this concern regarding mobile friendly test result but the theme has no issue with mobile friendly test because it is responsive in nature. The recommendation you get from test are more of a page optimization/performance stuff which is outside of the support that we can offer. You might want to hire someone that is knowledgeable with site optimization.

You can also try (if you have not yet) some of the site optimization guide we provided here.

Thank you for understanding,

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.