What I have come up with is that first off you need to declare a doctype to your document
Than secondly the form is going bad on screen resize as you have noticed it is because you have “fixed” sizes for your elements inside the form.
Yes I know we don’t want the form to be so small that it becomes impossible to use so I had an idea it’s best to use the form as a popup on button click as it appears to be effecting the responsive design eventually the form will be the only thing visible on the screen without a background color.
if you wish to continue this idea and see where it leads you make the
col-2 container of the form a
z-index:999; since you can not stack static elements with z-index you have to change it to either
position:fixed; since relative positioning has no real effect of positioning your elements its the best choice the only problem is the input fields are visible but the background seems to stay behind.
Thats why I suggest creating a button than hiding the form and display it anyway you like.
Assuming you chose to remove the form I tried getting your images to have similar heights, since images can only go as far as the width attribute is without stretching it i made
col-4 width:50%; tada it works!.
but wait there is a problem the image is still ever so slightly smaller than the other images even at that width. So I decided when you style
nav tags just put a
margin-top:-20px; just to hide that nasty piece.
when I scaled the window afterwards it appears to work perfectly! …obviously I may criticized by someone for the use of negative margins on responsive design. but for what it’s worth it’s only a small bit.
unfortunately using the form as it is may be a difficult task if you still wish to continue to have it there.(for “importance” purpose or “quick and easy” use) really i don’t think it will be a bad idea to use a form as a button.
But listening to my 2c comments sorry about that,
that is all the help I can give you