hey sorry this took a while. i fixed it:
IMG_2523.PNG
after googling about it a little i realized 100vh and 100svh just dont work as expected in the instagram browser
i added this code to your website in lay options → custom css& html → custom <head> code:
<script> var ua = navigator.userAgent || navigator.vendor || window.opera; var isInstagram = (ua.indexOf('Instagram') > -1) ? true : false; if (document.documentElement.classList ){ if (isInstagram) { window.document.body.classList.add('instagram-browser'); window.laytheme.on("newpageshown", function(){ //is front page?: if( jQuery("body").hasClass("id-2294") ) { jQuery(".lay-content").css('min-height', 'calc( 100vh - 60px )'); jQuery(".grid").css('min-height', 'calc( 100vh - 60px )'); jQuery(".fp-section, .fp-slide, .fp-tableCell").css('height', 'calc( 100vh - 60px )'); jQuery(".row, .row-inner, .column-wrap").css('min-height', 'calc( 100vh - 60px )'); } }) } } </script>it checks if you are on an ig browser and then just sizes all important divs differently
the script also checks if we are currently on the page with the id: 2294 because thats the frontpage where u have the issue
sources:
https://www.reddit.com/r/web_design/comments/law4yl/instagram_how_many_baby_chicks_need_to_die_before/
https://jsfiddle.net/toshuu/ab510Lzf/1/
does it work for you too now?