Dude, I just saw your last two posts, my view port is fine now and the images are just scaled to fit on the screen, AWESOME! Now I have a new and different problem, I just decided to put a "my messages" and a "log out" buttons just next to each other on my site and despite on my mobile both are correctly rendered links (A.k.a <nav a>) I just keep accidentally pressing log out when I want to see my messages, and login in three times in a row is not being fun anymore and even less for my users.
Well dude, then you are probably like me, fat thumbs are a nightmare! The problem basically is that your buttons/links are not big enough and your users thumbs are just bigger than expected.
You should take into account that a normal thumb has a size around 10x10mm and that in DIPs (A.k.a CSS pixels) that is around 40px... standard appear here and it results to be 48px, so I would recommend you to give it a min-width/min-height of 48px so you are sure it has enough clearance for my grandpa fat fingers. And if you want to make them smaller... it is fine as far as you ensure there is enough space between elements to ensure no accidents happen there!
I'm do normally use:
nav a, button{
min-width: 48px;
min-height: 48px;
}
Also, when it is about links depending the design of your site you could use some padding:
.nav a {
padding: 10px;
}
And dude, as life can be as complex as you want you can go even a little bit further! Suppose you have a list of links, on below the other then you could add some top and bottom padding but left the sides as it is:
.my_stuff_list-entry a {
padding: 15px inherit;
}
That inherit will leave its sides as per its parent definition.