.webp)
Info
Overview
Use this code when your page shows a horizontal scrollbar even though the layout looks normal.
This usually happens when an element stretches a few pixels beyond the screen because of margins, positioning, fixed widths, or animations.
The snippet hides that overflow and keeps the layout locked to the viewport.
It works well, but it’s still a patch.
You should track down the element causing the issue and fix it properly.
Setup
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
html, body {
overflow-x: hidden;
}Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.