CODEWITHSUNDEEP
htmlcss
JGallardo
JGallardo

Reputation: 11373

Should a <li> that contains a link have the same amount of padding if in a <nav> element?

Intent
To make links in a footer easier to click on when on mobile.

Background
I have a footer with links. The links were very close together and I wanted to make them easier to click on. When you see the footer on mobile, clicking the links was difficult.

Rather than adding a margin-bottom I chose to add padding to the <li>. But I also did that to the <a> because I wanted to add clickable area. I opted for padding as opposed to increasing the font-size. I tried just increasing the padding in the <a> element but not sure if that would make other links overlap each other.

Should I have the <li> and the a the same height? or maybe I should add line-height instead?

This is my current CSS

.footer-widgets ul li {
  padding: 3px 0;
}

.footer-widgets ul li a {
  color: rgb(161, 161, 161);
  padding: 3px 12px 3px 0;
}

Here is a screenshot of the page showing the clickable area

screenshot of links

Upvotes: 0

Views: 40

Answers (2)

Zulfe
Zulfe

Reputation: 881

I would keep the <li> and <a> the same height. I've used my mobile device on many pages with a similar setup as your own, including my own site. Most devices running Android 4.1+ have the optional functionality of click-zoom (the content is magnified when the browser cannot determine the exact element attempting to be selected). I don't use this feature personally, and smaller elements work perfectly fine.

Upvotes: 1

brouxhaha
brouxhaha

Reputation: 4093

Add display: block to your links, so they fill up the li elements. The li will expand with the a tag this way. You may need to set a width on your ul or li to prevent the links from going across the page.

Upvotes: 1

Related Questions