I am struggling with a height consistency issue that I cannot figure out. The problem can be seen in this Fiddle: FIDDLE
Here is the code snippet:
$(document).ready(function() {
if ($(window).width() > 768) {
$(window).ready(function() {
var mainHeight = $('.main').height();
$(".block-wrap").height(mainHeight);
});
}else{
$('.block-wrap').css('height','auto');
}
});
$(document).ready(function() {
if ($(window).width() > 768) {
$(window).resize(function() {
var mainHeight = $('.main').height();
$(".block-wrap").height(mainHeight);
});
}else{
$('.block-wrap').css('height','auto');
}
});
The objective is to make the 'block-wrap' div match the height of the 'main' div. It works as intended until a media query is applied. In such cases, the 'block-wrap' continues to take its height from 'main', while I would prefer to set it to auto height, as attempted in the JavaScript section.
Currently, the script functions correctly when the window width is below 768px, but only upon page refresh and not during resizing.