Make Lightbox take up full vertical height on mobile

466 0 1
Posted   6 months ago



The TLDR on what I'm trying to do is, I have users going through scenarios and I will allow them to open up a knowledge base (the Flow knowledge base) in a lightbox, where the knowledge base is being iframed in via a website on that lightbox. This works great on a desktop/laptop, but when I go to mobile, the lighbox only takes up a small portion of the vertical height. I tried going through the CSS to see if I could figure it out, but no luck. I'd like the lightbox to take up the entire vertical height like it does on desktop/laptop.
In the below example, I'm using the Flow User Guide for demonstration purposes.
On desktop: As you can see it takes up the entire height. The knowledge base is nicely usable here.
On mobile: The lightbox only takes a small portion of the vertical height and the knowledge base is unusable.
Any help would be appreciated.


( 0 )

Answers  ( 1 )

avatar Chris Van Wingerden   |    
Posted   6 months ago
  ●   Edited   6 months ago

When you add an iframed url to a page (Insert tab >> Video >> From URL), the iframe's settings default to have width and height of 320x240. 

At the smallest breakpoint range, the page looks to the min height setting to control the iframe on the page.

So, you can change the Min Height setting to have control over the display height. I did a test with 600 instead of 240, for example.   



( 1 )
5 months ago     redmondd     21   |   5  

Thank Chris. The other thing was to make sure the section takes up 100% of the screen height. While this isn't technically needed if the iframe height is large enough, I found it helps.