Increase Tap Target Size In Footer For Mobile - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Increase Tap Target Size In Footer For Mobile

Jennnnn

7:03 pm on May 10, 2019 (gmt 0)

Top Contributors Of The Month

I want to increase the size of the tap targets in my footer section for mobile devices.

Chrome’s Lighthouse says the current height of the footer tap targets in mobile is 18px and suggests it be increased to 48px.

Footer HTML:
<div class="footerBoxa">
<h2 class="alternate5"><strong>Menu:</strong></h2>
<p class="small">
<a href="../example.htm” (tap target)
<a href="../example.htm” "
<a href="../example.htm”. "

CSS:
.small{font-size:0.92em;}

.footerBoxa{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxb{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxc{float:left;width:30%;padding:0;margin:0 1% 0 1%;}

CSS - media queries:
.footerBoxa{width:98%;}
.footerBoxb{width:98%;}
.footerBoxc{width:98%;}

.footerBoxa{width:48%;}
.footerBoxb{width:48%;}
.footerBoxc{width:98%;}

The tap targets are located in both footerBox a and b. Regular text is in footerBox c.

What is the best way to increase the size of the tap targets in my media queries while keeping it visually balanced with the regular text in footerBoxc? Should I add top and bottom padding to the tap targets? Increase the font size and add padding? Something else?

Thanks for your help!

NickMNS

3:24 am on May 11, 2019 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

This is a difficult question to answer without being able to see the actual layout. Typically I would say increase the padding, but as I said it really depends on the specific layout.

lucy24

5:16 am on May 11, 2019 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Psst!

.footerBoxa{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxb{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxc{float:left;width:30%;padding:0;margin:0 1% 0 1%;}

=

.footerBoxa, .footerBoxb, .footerBoxc {float:left; width:30%; padding:0; margin:0 1%;}

It sounds as if you need an @media rule specifying some max-width (your choice) and then set a non-zero padding for that size. Possibly even two sizes, a smallish one for tablets and a still smaller one for phones.

With rare exceptions, default padding is 0 (I think lists and similar have built-in padding), so “padding:0" shouldn't even be necessary to specify.

Now, about those multiple floats ... but that's a subject for a different thread.

Jennnnn

3:02 am on May 12, 2019 (gmt 0)

Top Contributors Of The Month

I’m wondering if I can keep the footerBox code the same in the media queries (with your optimization) and make the list anchor text (tap targets) buttons with top and bottom padding between each button.

Desired look:

- padding (non clickable space) - 4px high
- button with 15 px above and below horizontally centered anchor text (18 px high) = 48px high clickable button with text
- padding (non clickable space) - 4px high

Repeat above for each additional anchor text (tap target)

If that might work how would I handle the variable width of each link? I would want to maintain the same left margin but have the button length accommodate the length of each anchor text link.

Is it okay (seo wise) to style buttons that are the same color as the page background? Google won’t think that something is being hidden?

Thanks for your help!

lucy24

5:36 am on May 12, 2019 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

padding (non clickable space)

Ordinarily, padding would be, “yes-clickable” space, since it’s part of the element. If you want to increase non-clickable space, that’s a margin.

not2easy

1:09 pm on May 12, 2019 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Is it okay (seo wise) to style buttons that are the same color as the page background? Google won’t think that something is being hidden?

Not so much a seo concern as a usability concern, button background color generally a user experience question. The color can signal to users to draw attention or highlight the tap target. A good number of users are impatient and action targets should be made obvious and user friendly rather than blending in to the background. The object of buttons is to be user friendly rather than attractive and unobtrusive. ;)