So now that you are into responsive design you realize that you would like to have different media style sheets for different screen sizes, I mean, while taking advantage of the precision of a mouse on the big screens by having your buttons at a regular size you would probably want to make them bigger on the smaller screens.

One clear and easy way to do that is by applying different style sheets to different devices, now when this can be achieved by many different ways, one of the preferred are media queries. 

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.

If you saw my previous post about defining the view port probably you solved only some of the issues that appear when rendering your site on different screens, but now it kinda renders you keep facing issues, and in this post we'll talk of one that mainly affects the small ones, and it is called "View port overflow".

Your site is rendering fine on your laptop? It is easy to reach that first one as you are developing there, but what happens when you render your site on a mobile device or a tablet? I can guess that if you are reading this is because it is doing weird stuff in there.

Old school guys never worried about this as everything was rendered on desktop/laptop PCs, nowadays a site is used from almost any kind of screen, from your mobile to your smart. And with that you fall into the situation were the site starts rendering weird because the viewport was never defined.