Support pages
Let customers copy their screen details into a request.
Content / widget · Elementor module
Viewport Dimension Display Widget Plugin for Elementor
Show visitors their viewport width and height live, with the Elementor device that size falls into and a Copy button for bug reports.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Viewport dimension displayProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published outputs of the widget. Resize the window or turn your phone and watch the numbers change.
02 / Inside WordPress
Viewport dimension display controls in Elementor
Content sets whether the Elementor device, screen size, pixel ratio, orientation and Copy button are shown, and the labels. The Style tab covers the size, labels and details, the box and the Copy button.
03 / Website use cases
Where to use viewport dimension display
When a visitor reports that a page looks wrong, the first question is usually how wide their screen is, and most people cannot answer. Designers testing layouts also want to see the exact width and which breakpoint applies. Viewport dimension display shows the viewport size live as the window changes, names the Elementor device from your own breakpoints, and lets visitors copy the details into a message. Nothing is stored or sent.
Design reviews
Check the exact width and breakpoint while testing a layout.
Client previews
Show clients which device layout they are seeing.
04 / Installation and setup
How to add a viewport size display in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Viewport dimension display in the Complementor library.
Add the widget to a page, such as a support or contact page.
Choose which details to show.
Adjust the labels.
Style it and resize the window to check it.
05 / Content and style controls
Customize viewport dimension display in Elementor
Configure the settings available for this module to suit the page you are building.
Live width and height in CSS pixels.
Elementor device from your breakpoints.
Optional screen size and pixel ratio.
Optional orientation.
Copy button for bug reports.
Updates once per frame while resizing.
06 / Choose the right approach
Viewport dimension display and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Browser developer tools
Show the size, but most visitors never open them.
Screen size websites
Report a size but not your site's Elementor breakpoints.
07 / Requirements and compatibility
Viewport dimension display compatibility with Elementor
- Requires Elementor; works without WooCommerce.
- Shows sizes; it does not change the layout.
- Sizes are CSS pixels as browsers report them.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot viewport dimension display
Check these settings if the published page behaves differently from the editor.
Why does the width differ from my screen resolution?
The widget shows the browser viewport in CSS pixels. Turn on the screen size and pixel ratio to compare.
Why does the device name not match my phone?
The name comes from your Elementor breakpoints, so it describes which layout applies at that width.
Why does the size change in the editor?
In the editor it measures the preview, so switching the device preview changes it.
Why did Copy show a message instead of copying?
The browser did not allow copying. Select the text and copy it by hand.
Viewport dimension display plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is anything sent or stored?
No. The size is read in the visitor's browser and only copied when they press Copy.
Does it use my custom breakpoints?
Yes. It reads the active breakpoints from your Elementor site settings.
Is it accessible?
Yes. The size is plain text, the Copy button is a real button and its result is announced.
Does it need JavaScript?
Yes. Without it a short message is shown instead.
10 / Annual All Access subscription
Get viewport dimension display with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.