Background: Currently, I'm developing in WordPress with the Lighthouse theme and Elementor plugin. The team currently creates new slides and sections (instructor guides), links them together, and publishes them into a course for virtual leader-led content.
Problem: The slides are not screen-responsive by default. Unlike PowerPoint where slide designs are locked into a fixed ratio, the CSS in WordPress slides must be strategically tweaked to ensure a fixed ratio. There is a "fixed ratio" toggle button on the slide dashboards, but it is not useful when objects on the slide is adjusted to pixels.
Solution:
Create one parent section and copy/paste this CSS to the Custom CSS section under the Advanced tab.
.consistentHeight {
height:100vh!important; margin-top:-10vh!important; padding-top:10vh!important; }
You may be wondering why we don't adjust these settings in the provided Advanced settings, but we are limited to px, em, rem, and %. This CSS code adjusts it all to viewport height (vh). And the [!important] ensures that it is applied consistently.
So why are we setting a negative margin and then pushing the content back down with the padding?
This removes the white bar between the navigation menu and the slide.
The margin:-10vh pushes the entire section (ie. background) up so participants don’t see the white band between the black nav-bar and the slides in VLL.
The padding:10vh pushes only the content within the section back down so it doesn’t overlap with the black nav bar.
Adjust the Layout Settings as follows.
Avoid using pixels (px) when resizing content.