Instagram browser height

Hugo Le Corre

Hello,

I've set a custom row height of 100vh for every row with the fullscreen slider enabled. Everything works perfectly except for the Instagram browser. As you can see in the two images, the Instagram browser isn't displaying correctly; the caption seems to be hidden. I've considered using a dvh unit to solve the problem, but it doesn't seem to be supported.

Do any of you have a solution for this?

Thank you so much in advance.

Best,

Hugo

IMG_1042 Medium.jpeg IMG_1043 Medium.jpeg

arminunruh

can you try

100svh

does that work?
it also says the valid units here

Screenshot 2024-02-13 at 13.59.33.png

Hugo Le Corre

Hello, I tried with 100svh and it's unfortunately not working.
Any other idea ? Thanks !

arminunruh

ok whats ur website address?

arminunruh

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

Hugo Le Corre

Just sent you the informations. Thanks

arminunruh

hey sorry this took a while. i fixed it:

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?

Lay Theme Forum

Instagram browser height

Before you post:

When you post:

Online Users