[Lucius Douglas]

I’m posting this for information purposes only. I had an issue needing to expand an ‘elementor-element’ so it displayed fully based on the device width and ‘outside’ the ‘content-area’.

This CSS code works as you can see on the https://kwatsonproperties.online/buying-real-estate-in-colorado/ page.

/* * Force elementor-element-3a4be7b to span the full viewport width
* even if nested inside a restricted container.
*/
.elementor-element-3a4be7b {
position: relative;
width: 100vw !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;

/* Ensure no horizontal scrollbars appear due to the 100vw */
box-sizing: border-box;
}

/* * Optional: If the inner content of this element is still boxed
* and you want that content to touch the edges too:
*/
.elementor-element-3a4be7b > .elementor-container {
max-width: 100% !important;
width: 100% !important;
}

/* Force elementor-element-3a4be7b to true 100% viewport width */
.elementor-element-3a4be7b {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;

/* This centers the element relative to the screen, not the parent */
left: 50% !important;
transform: translateX(-50%) !important;

/* Remove any margin that might be pushing it */
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

/* Prevent the horizontal scrollbar “wiggle” on the whole site */
html, body {
overflow-x: hidden !important;
width: 100% !important;
position: relative !important;
}

[Grace Support]

Please send your website URL and WordPress admin login details at [email protected] so we can check and assist you quickly.

[Lucius Douglas]

I would recommend reading a post before responding.

I fixed my problem and was simply sharing my solution for other Grace Themes users who use Elementor.

I don’t need assistance on this post.

[Author]

Posts