Display Width in Pixel – Elementor

// Description: Displays the responsive width of the preview in the Elementor editor

// Author: Carlos Béjinha

// Author URI: https://binformatica.pt

// ------------------------------------

// Info Width In Elementor Editor

function add_custom_script_to_elementor() {

    ?>

    <script type="text/javascript">

    (function() {

        function updateWidth() {

            var preview = document.getElementById('elementor-preview-responsive-wrapper');

            if (preview) {

                var width = preview.offsetWidth || 0; // Prevents error if offsetWidth is undefined

                width = width - 40;

                var displayWidth = document.getElementById('width');

                if (!displayWidth) {

                    displayWidth = document.createElement('div');

                    displayWidth.id = 'width';

                    displayWidth.style.position = 'fixed';

                    displayWidth.style.top = '10px';

                    displayWidth.style.left = '300px'; // Position adjustment

                    displayWidth.style.color = 'white';

                    displayWidth.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';

                    displayWidth.style.padding = '5px 10px';

                    displayWidth.style.zIndex = '9999';

                    displayWidth.style.fontSize = '14px';

                    document.body.appendChild(displayWidth);

                }

                displayWidth.textContent = 'Width: ' + width + 'px';

            } else {

                console.log('Element #elementor-preview-responsive-wrapper not found.');

            }

        }

        // Updates the width every 200ms with additional security check

        setInterval(function() {

            try {

                updateWidth();

            } catch (e) {

                console.error('Error updating width: ', e);

            }

        }, 200);

    })();

    </script>

    <?php

}

add_action('elementor/editor/after_enqueue_scripts', 'add_custom_script_to_elementor');

// End Info Width In Elementor Editor