How to change a properties of a CSS class in case when browser window is shorter than 600px. Default properties are following:

.side { height:400px; width:700px; }

I want to change it to:

.side { height:300px; width:550px; }

when the window height is less than 600px.

Thanks.

How to change a properties of a CSS class in case when browser window is shorter than 600px. Default properties are following:

.side { height:400px; width:700px; }

I want to change it to:

.side { height:300px; width:550px; }

when the window height is less than 600px.

Thanks.

• javascript
• css

• possible duplicate of How do I dynamically adjust css stylesheet based on browser width? – Quentin Commented Apr 12, 2013 at 17:09

2 Answers 2

Its called a media query:

@media all and (max-height: 600px) {
    .side { height:300px; width:550px; }
}

You could try :

(function($) {

    var $sides = $('.side');

    var setCss = function() {
        if($(window).height() > 600) {
            $sides.css('width', 400).css('height', 700);
        } else {
            $sides.css('width', 300).css('height', 550);
        }
    };

    $(document).ready(function() {
        setCss();
        $(window).resize(setCss);
    );

})(jQuery);