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".
We were talking about the resolutions of the view port on the previous post, so you kinda have a notion of that already, but now on your site you decided to put some nice videos and some pictures you thought were great and coherent with your site... you render it on your laptop and everything smooth, now you go to your mobile and... what the h...
Yes, despite the browser on your phone will probably try to reorganize the text to fit on its view port it will not with images videos and some other stuff, and most important it will neither if you decided to use fixed sizes instead of relative ones... in this world of responsive design it is almost always a better idea to user relative sizes instead of fixed ones, your days will be much nicer that way...
So, continuing with this, let's suppose you added to your site a img with a width of 1000px, unless you specified something else on your css the browser will maintain its width because in fact an image has a fixed width, rendering that on a view port of 540 DIPs will let the user with a unintended horizontally scrolling website just because of an img that takes almost twice the screen of its phone... uggghhhhhh...
Guess who is coming now... max-width to the rescue! Yep, despite you are not setting the size of the img you are setting its max width this way with a... yes, as I said: relative... BOOM
Now, when someone renders your site on a small view port the width will be reduced to the relative value you used on its max-width property.
Some people out there do recommend using the following CSS code to avoid some repetitive render problems:
img, embed, video, object {
max-width: 100%;
}