where do I put the padding to be touch screen?

Question

Let's gonna imagine I have a simple bar menu.

<div>

<ul class ="main-nav">
   <li><a herf =#Home> Home </a></li>
   <li><a herf =#about> about </a></li>
   <li><a herf =#Contact> Contact </a></li>
 </ul>

</div>

my question is where I have to put the padding if I want the screen touch?

target the tag element inside the "li" and add padding someting like

li a{

padding: 15px;

}

or add padding to li something like:

main-nav li { padding: 15px; }

Answer 1 · 2017-01-16T07:30:35Z

January 16, 2017 7:30am

In the challenge I did but I put the padding in the tag element and it works!

Answer 2 · 2017-01-16T23:05:35Z

January 16, 2017 11:05pm

I think what you are asking and apologies if I'm wrong but its just to clarify my response. Where do you put the padding to make the hyper links / nave menu bigger and wider so they are easier to click on.

To do this I think you need to target the <a> tag inside the <li> tag. This can be done in the above way you put

ul li a{padding: 15px};

or to increase specify (if you have more than one unordered list in the future)

main-nav li a { padding: 15px };

By doing this it increase the size of the <a>'s link size on the li element which makes the target area for touch screen much better for use.

Hope this helps

Stephen

Welcome to the Treehouse Community

Looking to learn something new?

Juan David Hernandez

Juan David Hernandez

where do I put the padding to be touch screen?

2 Answers

Juan David Hernandez

Juan David Hernandez

Stephen Fowles-White

Stephen Fowles-White

Juan David Hernandez

Juan David Hernandez