• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Adjust layout based on elements with dynamic height

New Here ,
Apr 04, 2017 Apr 04, 2017

Copy link to clipboard

Copied

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

Views

171

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines