[meoptometryParticipant]

I have links across the header that are being flagged “too close together” for mobile sites and google is also flagging the social media links in the header as “too small for a user to easily tap on a touchscreen”. How do I modify these to to follow google’s guidelines?

Thank you,

meo

https://www.meoptometry.com

https://developers.google.com/speed/pagespeed/insights/?url=www.meoptometry.com

P.S. A quick unrelated question…I am currently on 3.2.2. Will I be able to update from this version to 4.0 or would it be advisable to update to 3.2.5 prior to making the jump to 4.0?

[Rue NelModerator]

Hello There,

Thanks for posting in!

We can try to increase the font size of the topbar content on smaller screens, Please try to add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 767px){
 .x-topbar .p-info {
   font-size: 16px;
 }
}

You can update the theme directly to 4.0 when it is out. Just make sure to checkout the changelog to know what had changed, you might have something custom in your theme that might be affected.

Please let us know how it goes.

[Vaidotas PParticipant]

Hi,

I have the same issue as it was posted above. Suggested code (below) didnt work, also tried to reduce font, but still get nothing

@media (max-width: 767px){
.x-topbar .p-info {
font-size: 16px;
}

For me Pagespeedinsights generates this:

“some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.
The following tap targets are close to other nearby tap targets and may need additional spacing around them.
The tap target Pradžia and 3 others are close to other tap targets show original”.

I also discovered, that Iphone 4s doesnt show navbar links – menu button do not react while tapping on it, but on other phone LG G2 with bigger screen, navbar links works great.

Please help me with this issue.

Vaidyz

[JadeModerator]

Hi there,

Please use this code in the customizer:

@media (max-width: 767px){

    .x-colophon.bottom .x-nav li {
        margin: 0 1.2em;
    }

}

Hope this helps.

[Vaidotas PParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Vaidyz,

I have tried to login and test a CSS code in your site but it seems like you are currently making changes as I am seeing the page as how it shows in the screenshot attached here.

You may try this CSS instead:

@media screen and (max-width: 767px) {

    .x-colophon.bottom .x-nav li {
        margin: 0 2em;
    }

}

Also, I’d recommend that you clear your caching plugin, and disable it during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

[Vaidotas PParticipant]

Hi again,

And how to make bigger tap size for each link of footer menu links (not of menu links from scrolling down menu above) on mobile version?

Have a good day,

Vaidyz

[ZeshanMember]

Hi Vaidyz,

Thanks for updating the thread!

Do you want to increase the font size of footer navigation links on mobiles? If so, you can use following CSS code under Custom > CSS in the Customizer:

@media (max-width: 767px) {
  .x-colophon.bottom .x-nav li a {
    font-size: 16px;
  }
}

Let us know how it goes. Thanks!

[Vaidotas PParticipant]

Hi again,

Thanks, it worked immediately, but I also need to have possibility to increase margins (spacing) among navbar links in footer menu. Any ideas ?

Thank you,
Vaidotas

[ZeshanMember]

Hi Vaidotas,

You’re welcome! 🙂

To increase margin in between footer navigation links, please use following CSS code:

.x-colophon.bottom .x-nav li {
    margin: 0 10px;
}

You can adjust 10px to change the margin.

Hope this helps. 🙂

Thank you!

[orangecrushParticipant]

Meo, how did you get the Scroll Top to close to other links error in Google Insight to go away?

Thanks!

Bill

[RadModerator]

Hi Bill,

It depends on your current setting. It’s usually caused by links that are too close to each other, hence, the solution in increasing its margin or padding. And if a link, like a social icon isn’t that much recognisable in mobile, then increasing its font size is the solution too.

The question would be, are they links in top bar, or menu bar, or footer?

Thanks.

[orangecrushParticipant]

Thanks for the reply. I successfully solved the errors with the social icon and footer menu. The scroll-top has me stumped. I have tried all kinds of padding to remove the problem but can’t seem to nail it!

I’m pretty sure it’s the footer. The error says the scroll-top is too close to two other links.

The tap target is close to 2 other links.

http://www.getfreshcarpetcleaning.ca

[RadModerator]

Hi there,

Yes, I can see that. How about increasing your footer’s margin which is almost equal to scroll top? But what if google is testing it with the current viewport where the scroll top is float? That means when you scroll there is a chance the scroll top would appear on top of any content, not just with the footer. That’s how floating elements work.

Another solution is increasing your entire site’s spacing, and limit scroll top to that space 🙂

What do you think? I can’t really provide a solution yet, it depends on your preference.

Thanks!

[orangecrushParticipant]

Ok. I figured it out. The culprit was the Navbar with no logo in stacked mode (and under the revolution slider). Is there a way I can reduce the margins of just the top stacked Navbar that contains the site title? That would stop the google page insights error.

Thanks!

[Author]

Posts