Loading...
 
Skip to main content

Mobile view issue - Tap targets are too small and too close together

  • Tracker item actions
Trackers
Items
Status
Open
Subject
Mobile view issue - Tap targets are too small and too close together
Version
26.x
master
Category
  • Usability
Feature
Mobile (Mobile Tiki and Voice Tiki)
UI / UX (User interface and experience)
Resolution status
New
Submitted by
Gary Cunningham-Lee
Lastmod by
Gary Cunningham-Lee
Rating
(0)
Description

From a Lighthouse check of Tiki.org:

"MOBILE FRIENDLY
Tap targets are not sized appropriately - 28% appropriately sized tap targets
Make sure your pages are mobile friendly so users don’t have to pinch or zoom in order to read the content pages. Learn how to make pages mobile-friendly."

Some advise says that the minimum recommended touch target size is around 48 pixels on a page that has a mobile viewport set. The Lighthouse alert is apparently due to the social media icons.

Edge's AI search reply says:

I understand that you are facing issues with the mobile view of your Bootstrap website. You mentioned that the targets are too small and too close together. Here are some possible solutions to your problem:

Increase the font size: You can increase the font size of your website to make it more readable on mobile devices. This can be done by adding the following CSS code to your stylesheet:

Copy to clipboard
@media (max-width: 767px) {
  body {
    font-size: 18px;
  }
}


Increase the padding: You can also increase the padding around your targets to make them easier to tap on. This can be done by adding the following CSS code to your stylesheet:

Copy to clipboard
@media (max-width: 767px) {
  .target {
    padding: 10px;
  }
}


Use larger targets: If increasing the font size and padding is not enough, you can also use larger targets. This can be done by creating custom CSS classes for your targets and applying them to your HTML elements. Here is an example:

Copy to clipboard
@media (max-width: 767px) {
  .large-target {
    font-size: 18px;
    padding: 20px;
  }
}
Importance
7
Easy to solve?
7
Priority
49
Demonstrate Bug on Tiki 19+
Demonstrate Bug (older Tiki versions)
Ticket ID
8571
Created
Monday 18 December, 2023 07:56:36 UTC
by Gary Cunningham-Lee
LastModif
Monday 18 December, 2023 07:56:36 UTC


Show PHP error messages