javascript - Jquery doesn't change div's width on smaller screen after auto adjusting on regular screen -

javascript - Jquery doesn't change div's width on smaller screen after auto adjusting on regular screen -

got script auto adjusts width of children divs depending on number of children. , on smaller screen need them 100% wide. i've tried inserting script right script adjusts width on regular screen. doesn't work. tried inserting in bottom of page. didn't work too.

here code

$(".basecollections").each(function(){ var child_width = 100 / $(this).children().length; child_width = math.floor(child_width); $(this).children().css("width", child_width + "%"); if ( screen.width < 1000 ) { $(this).children().css('width','100%'); } })

http://jsfiddle.net/3x466nb1/

instead of screen.width need utilize $(window).width(): demo

$(".basecollections").each(function(){ var child_width = 100 / $(this).children().length; child_width = math.floor(child_width); $(this).children().css("width", child_width + "%"); if ( $(window).width() < 1000 ) { $(this).children().css('width','100%'); } });

also if want alter dynamic, need write piece of code within resize event of window element:

$(window).resize(function(){ $(".basecollections").each(function(){ var child_width = 100 / $(this).children().length; child_width = math.floor(child_width); $(this).children().css("width", child_width + "%"); if ( $(window).width() < 1000 ) { $(this).children().css('width','100%'); } }); });

javascript jquery css