Hey everyone, I've been working on creating a responsive div with a 16:9 ratio. However, I've noticed that when I resize the window, the container3 remains the same size. Can anyone spot an issue in my code and offer some help? Thanks!
$(document).ready(function(){
rp_config();
});
$(window).resize(function(){
rp_config();
});
function rp_config(){
var windowwidth = $(window).width();
var windowheight = $(window).height();
var bar = 64;
var bottom = 45;
var chat = 250;
var container2_width = windowwidth - chat;
var available_height = windowheight - bar - bottom;
$(".container").width(windowwidth);
$(".container2").width(container2_width);
$(".container3").width(available_height / 9 * 16);
$(".container").height(available_height);
$(".container2").height(available_height);
$(".container3").height(available_height);
}
rp_config();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="background-color:#000;">
<div class="container2" style="background-color:#333;">
<div class="container3" style="background-color:#ccc;">
</div>
</div>
</div>