elementor / elementor/elementor

🐞 Bug Report: Section Height = "Fit to Screen" can break the design in edge cases

Open
#20,356 3 comments 0 reactions 0 assignees View on GitHub
bug mod* mod/b* solved-by/container type/layout type/styles
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Prerequisites

- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.

### Description

Sorry, I don't know what setting corresponds to this, but whatever it is, it is unusable as currently implemented.

This is the CSS you have:

```css
@media (min-width: 768px) {
.elementor-section.elementor-section-height-full {
height: 100vh;
}
.elementor-section.elementor-section-height-full > .elementor-container {
height: 100%;
}
}
```

If the content exceeds the height of the window, this breaks catastrophically.

It is easy to break it by resizing the window to a letterbox (wide, but not very tall).

Using `min-height` instead of `height` on either of the CSS selectors above does not fix it.

I cannot think of a way of making this feature work without Javascript - vertical centering is tricky with CSS alone.

I suggest this feature is removed until it is implemented to work properly.

The current implementation does not work at all in any browser.

### Steps to reproduce

See above

### Isolating the problem

- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [X] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently using the steps above.

### System Info


== Server Environment ==
Operating System: Linux
Software: Apache
MySQL version: MySQL Community Server - (GPL) v5.7.39
PHP Version: 7.3.33
PHP Memory Limit: 512M
PHP Max Input Vars: 1000
PHP Max Post Size: 128M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.0.3
Site URL: https://www.performancepads.co.uk/wordpress
Home URL: https://www.performancepads.co.uk
WP Multisite: No
Max Upload Size: 128 MB
Memory limit: 40M
Max Memory limit: 512M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%
Language: en-GB
Timezone: Europe/London
Admin Email: admin@performancepads.co.uk
Debug Mode: Active

== Theme ==
Name: Performance Movers
Version: 1.3.0
Author: QZ Design
Child Theme: Yes
Parent Theme Name: Expert Movers
Parent Theme Version: 0.4.8
Parent Theme Author: Luzuk

== User ==
Role: administrator
WP Profile lang: en_GB
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

== Active Plugins ==
Akismet Anti-Spam
Version: 4.2.2
Author: Automattic

All-in-One WP Migration
Version: 7.66
Author: ServMask

Category Editor
Version: 3.8.3
Author: Kevin Heath

Classic Editor
Version: 1.6.2
Author: WordPress Contributors

Classic Widgets
Version: 0.3
Author: WordPress Contributors

Elementor
Version: 3.6.7
Author: Elementor.com

Elementor Header & Footer Builder
Version: 1.6.11
Author: Brainstorm Force, Nikhil Chavan

Formidable Forms
Version: 5.2.03
Author: Strategy11

Head, Footer and Post Injections
Version: 3.2.2
Author: Stefano Lissa

Menu Icons
Version: 0.12.11
Author: ThemeIsle

Mobile Menu
Version: 1.0.1
Author: QZ Design

Order Export & Order Import for WooCommerce
Version: 2.2.8
Author: WebToffee

Payment Plugins for Stripe WooCommerce
Version: 3.3.18
Author: Payment Plugins, support@paymentplugins.com

Performance Pads
Version: 1.0.1
Author: QZ Design

Product page shipping calculator for WooCommerce
Version: 1.2.62
Author: PI Websolution

Simple Banner
Version: 2.11.0
Author: Ryan Petersen

Trustpilot-reviews
Version: 2.5.901
Author: Trustpilot

UpdraftPlus - Backup/Restore
Version: 1.22.11
Author: UpdraftPlus.Com, DavidAnderson

Velvet Blues Update URLs
Version: 3.2.10
Author: VelvetBlues.com

Widget Menuizer
Version: 1.1.1
Author: Cornershop Creative

WooCommerce
Version: 6.3.1
Author: Automattic

Woo Default Image
Version: 0.1.2
Author: QZ Design

WOOF - WooCommerce Products Filter
Version: 1.2.6.4
Author: realmag777

WP File Manager
Version: 7.1.5
Author: mndpsingh287

WP Mail SMTP
Version: 3.3.0
Author: WPForms

Yoast SEO
Version: 18.4.1
Author: Team Yoast

== Elementor Experiments ==
Optimised DOM Output: Active by default
Improved asset loading: Active by default
Improved CSS Loading: Active by default
Inline Font Icons: Inactive by default
Accessibility improvements: Active by default
Import Export Template Kit: Active by default
Additional Custom Breakpoints: Active by default
Hide native WordPress widgets from search results: Active by default
: Inactive by default
Flexbox Container: Inactive by default
Landing pages: Active by default
Color Sampler: Active by default
Favorite Widgets: Active by default
Admin Top Bar: Active by default

== Log ==

Log: showing 5 of 52022-07-06 11:35:19 [info] elementor::elementor_updater Started
2022-07-06 11:35:19 [info] Elementor/Upgrades - _on_each_version Start
2022-07-06 11:35:19 [info] Elementor/Upgrades - _on_each_version Finished
2022-07-06 11:35:19 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.5.5',
'to' => '3.6.7',
)]
2022-07-06 11:35:19 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.5.5',
'to' => '3.6.7',
)]

JS: showing 2 of 2JS: 2022-07-06 10:57:25 [error X 4][https://ppads.qzdesign.co.uk/content/plugins/elementor/assets/js/editor.js?ver=3.6.7:52819:44] Cannot read properties of null (reading \'getBoundingClientRect\')
JS: 2022-07-06 10:57:29 [error X 2][https://ppads.qzdesign.co.uk/content/plugins/elementor/assets/js/editor.js?ver=3.6.7:16897:22] Cannot read properties of undefined (reading \'html\')

== Elementor - Compatibility Tag ==

Elementor Header & Footer Builder: Compatibility not specified

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.