​

I have 3 sections, but the second and the last one take their height from JQuery $(window).height(), but what is important to note is that we have this condition:

if($(window).width() < 1024){
$('#s2').css({'height':`${$(window).height()*2}px`});
$('#s3').css({'height':`${$(window).height()*2}px`});
}
if($(window).width() >= 1024){
$('#s2').css({'height':`${$(window).height()}px`});
$('#s3').css({'height':`${$(window).height()}px`});
}

As you can see, the second and the last section have different sizes if we use different devices. But when you open the web page you can see their content that is shown maybe for 0.5 seconds over the header (the first section)! after 0.5 seconds we have no problem, but this makes me sad… I minified the CSS and JS file, but only the speed of disappearing the content of the 2nd section and the last from section 1 was decreased 🙁

you can see the design of my page:

​

https://preview.redd.it/r90pouaxk4351.png?width=2676&format=png&auto=webp&s=c4644bc9c11e8d09524506cffd6f659d54253dcd

What should I do????????