IE rendering issue on responsive website

Question

This responsive page (and similar) works fine in Chrome an Firefox, but it does not work properly when viewed in IE when the browser windows is made small.

The viewport does not seem to be sized as intended, with the text flowing too wide and the images not being sized-down.

This is not much of a problem in desktop IE, but it does mean that Windows Phone users cannot view the webpage properly.

I thought that modern versions of IE were past these problems?

Does anybody know what is causing this issue?

Answer 1

You need to disable the floating of your column when you are dealing with media of small width. That is, if I inspect the element <div clas="col-1 left">...</div>, go to the inspector in IE and disable the float rule for .left {...}, everything looks like it probably should for mobile.

Floating objects I've found can be a bit tricky to deal with cross browser, so I only float items when you absolutely need to.

Edit: removed erroneous code.

Oddly enough, in your media rule for @media screen and (max-width:799px) you have rules

.col-4.left,.col-3.right {
    float: none;
    clear: both;
}

.col-2.right {
    float: none;
    clear: both;
}

I wonder why something like

.col-1.left {
    float: none;
    clear: both;
}

isn't included?