[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         |  Resolution:
 Keywords:                 |     Focuses:  css
---------------------------+------------------------------
Description changed by sabernhardt:

Old description:

> 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.''

New description:

 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:

 > 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(https://core.trac.wordpress.org/raw-attachment/ticket/53202/Web-
 capture_13-5-2021_75816.jpeg)]]


 This is how the exact page looks on mobile
 [[Image(https://core.trac.wordpress.org/raw-attachment/ticket/53202/Web-
 capture_13-5-2021_75945.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(https://core.trac.wordpress.org/raw-attachment/ticket/53202/Web-
 capture_13-5-2021_8542.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#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform