never make changes to core files. And add paddings and margins properly on your offcanvas button. Then it should not show that problem. Also add the meta viewport tag correctly. One of my client had this problem it was the fix. So i guess it'll work for you too. And one more thing Beans comes with that that meta tag but if you have removed it from the core file add it again. And if you have made changes to the core file i recommend you to download a new version and replace with the old one.
If your site is live and you have a cache plugin or cloudflare disable them and select the purge from cache option before doing another test.
Well, the off-canvas menu is not the problem, except on really small devices (but that is a statistic virtually neglegible). Good point on the viewport tag though, I was experimenting with layouts, and that one got me in a bit of trouble.
Where it comes to content though, so that which visitors actually see/read, that's where I'm bumping into these tapping problems. For example, when I have a list of service options, as an unordered list the individual items are too close together. As it appears.
I'm working on a local site, I should add. I did run into staging & caching issues with other tests, hence why I'm keeping things as simple as possible 🙂 It's a big enough learning curve here already!
Alright, so I won't be tweaking the core files. That leaves adding css, which is then put into less.
Actually, I may have figured something out.
Adding a .uk-list-space class to a ul tag increases the vertical space between list items. Combined with using .uk-button for the a href's the result is no further Tap errors.
Doesn't strike me as very elegant though. Particularly since this way I have to manually add it for each list & item.
And crap. While that works fine for list items with links within post/page content. I'm currently not seeing a way to solve this for sidebar / widget area content. While it appears possible to dabble in CSS rules, I'm thinking that beans may very well be capable of a more elegant approach. But how.
Did some testing, it seems this is pretty much a UIKit issue. I went on a search for online pages & sites built with it, running them through automated mobility tests, but they all share the same fundamental issue. Might very well be that the baseline UI vision was put in place before Search Engines last year started to process this as a datapoint.
There's some other aspects of that visible as well. Legible Text Guidelines are also a (severe) mismatch for UIKit out of the box.
The good part is that for Legible Text modifying matters via CSS is relatively simple. The bad part is that Tap Size is a real issue. I'm still chewing through UIKit css dependancies but a lot thus far seems very connected, making simple changes to margins & paddings very tricky. An alternate approach is duplicating classes and tweaking those before using them depending on viewport.
To give a few examples. An important link element should be a minimum of 48 CSS pixels tall/wide (7mm). Search Engines acknowledge that not all tap target can be or should be 48 CSS pixels.
They note that if your tap targets are less than 48 CSS pixels, there should at least be 32 CSS pixels (5mm) between any tap targets. Yeah.
Simply put: size matters, but it matters less than the space between targets.
This counts for - apparently - more than half of typical "tap target size" errors people get on seo tools. The tap targets are too close together, rather than the actual tap target being too small.
I've figured out the CSS bit to pretty much solve the UIKit Tap issue with list items without resorting to complex CSS/Viewport drama's, but I'm not sure where this should best be used: child theme styles.css? functions based custom loading? Help?
li a{line-height:1.8;}@media(min-width:60em){li a{line-height:1.2;}}Obviously proper viewport declaration is always required. Depending on whether you made other Legible Text style changes you may need to tweak the ratios in the above. But this is pretty much the minimum.
Hey J.C
You would advise to check this discussion which covers how to change UIkit LESS variables available which might help you making changes globally.
For stuff which is purely UIkit related, I would suggest to address your concerns on the UIkit Github issues.
Thanks,