[wp-trac] [WordPress Trac] #53202: Twenty Twenty: Buttons Are Not Responsive on Mobile Devices

[WordPress Trac]

#53202: Twenty Twenty: Buttons Are Not Responsive on Mobile Devices
---------------------------+-----------------------------
 Reporter:  deborah86      |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  5.7.2
 Severity:  normal         |   Keywords:
  Focuses:  css            |
---------------------------+-----------------------------
 On mobile devices and tablets, the buttons are not responsive. They appear
 like they would on the desktop website.  The buttons should be responsive
 so users have enough area to click on. They are too small on the mobile
 and tablet versions of the website.

 This is what Google says about using buttons:

 ''3. BE THUMB-FRIENDLY
 People use their fingers to operate mobile
 devices—especially their thumbs. Design your
 site so even large hands can easily interact with it.
 Use large, centered buttons and give them
 breathing room to reduce accidental clicks.
 Pad smaller buttons to increase
 the clickable area.
 Pad check boxes by making the text clickable''
 [https://services.google.com/fh/files/blogs/GoMo_Best%20Practices_GoMo%20Branded.pdf]

 This is how the page looks on desktop devices.

 [[Image(http://t2.dhosting.network/wp-content/uploads/2021/05/Web-
 capture_13-5-2021_75816_t2.dhosting.network.jpeg)]]


 This is how the exact page looks on mobile
 [[Image(http://t2.dhosting.network/wp-content/uploads/2021/05/Web-
 capture_13-5-2021_75945_t2.dhosting.network.jpeg)]]

 As you can see, the buttons are not responsive and do not take up the view
 so they can easily be clicked on by someone using the mobile device.


 [[Image(http://t2.dhosting.network/wp-content/uploads/2021/05/Web-
 capture_13-5-2021_8542_t2.dhosting.network.jpeg)]]

 If you change the width settings, this only changes the width of how the
 buttons will appear on desktop and mobile devices but it does not make
 them responsive.

 You can tell the buttons are not responsive because the size of the text
 within the buttons does not change.


 Here is a link to the page where I did the test:
 http://t2.dhosting.network/buttons-not-responsive-on-mobile

 ''Note:  The images are from a desktop computer using the dev tools to
 change to the mobile view but I get the same result on my mobile device.''

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53202>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform