Question

I have a site that I am developing, that uses a grid system In IE7, when the window is resized, one column “pops” down below the other. This is not a massive issue, but as there is no margin at the top/left, the layout is fairly unreadable.

So how can I apply a class to a

<div>

only when the window (viewport?) is resized to below a certain width?

eg

width > 500px = class="smallerwindow"

I then can style that class appropriately.

I have jQuery, modernizr etc.

Thanks,

Harley

Answer 1

As per my comment above, you can use respond.js to enable media query support for IE6-8.

Conditionally include the respond.js script:

<!--[if lte IE 8]>
<script type="text/javascript" src="~/Scripts/respond.min.js"></script>
<![endif]-->

NOTE: Recommended to include respond.js in head as will impact dom rendering

Then define your CSS as follows:

.myWindow { width: 500px; }

@media (min-width:1200px) {
    .myWindow { width: 400px; }
}

@media  (min-width: 768px) and (max-width:979px) {
    .myWindow { width: 300px; }
}

Just some sample viewport sizes and widths; tweak accordingly.