elementor / elementor/elementor
🐞 Bug Report: Section Height = "Fit to Screen" can break the design in edge cases
- 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
Assessment
This issue has not been assessed yet.