0 Replies Latest reply on Apr 4, 2017 10:49 PM by howardb47737057

    Adjust layout based on elements with dynamic height

    howardb47737057

      I'm playing around in Muse trying to create something similar to this: Grain & Mortar .

       

      When the page loads, the video is automatically resized to fill the browser. As you scroll, the elements below the video flow into the page regardless of the video's height. If the browser is resized, the elements below continue to appear below the video.

       

      Since all of the elements in Muse are positioned relative to the top of the page, they stay in place regardless of the size of other elements placed above them.

       

      As an example, I'm using a fixed width breakpoint at 1200px. If I create a video and set it full browser width, as the height adjusts proportionally, the elements placed below the video remain in the same position they were placed in the original 1200px composition. This means that depending on the height of the video, some elements may be covered by the video. You can see an example here: Video Demo

       

      Is there any way to force the elements to flow accordingly, instead of maintaining their exact placement in Design mode? I'm happy to hack something together using jQuery and CSS or use a widget if it solves my problem.

       

      I've attached three examples each with different browser widths for reference. The blue rectangle's y position is at 960px. The video is full browser width and its height is changing to maintain a 16x9 aspect ratio based on the width.

       

      Thanks

       

       

      SMALL (1800px wide)

      1.jpg

       


      MEDIUM (2500px wide)

      3.jpg

       


      LARGE (3700px wide)

      2.jpg