hey sorry this took a while. i fixed it:
[image: 1708422836694-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?
