Getting elementor to follow .container

Hi

Roman helped me our making my header and footer spread across the page more as more people these days have larger displays and so I wanted to make the most of this. The forum post can be found here. How to Use Up More Avaliable Space In Header

Now that Elementor has come out they give the option to create a full width page as shown here https://docs.elementor.com/article/40-full-width-page

Is there anyway of getting Elementor to folllow the container CSS class?

Many thanks

Will
https://thesurgenetwork.net

Hello Will, sorry for delay.

Is there anyway of getting Elementor to folllow the container CSS class?

I would be glad to help you, but I’m not sure what exactly you want to achieve. Can you please provide more details?

Kind Regards, Roman.

Hi Roman

Don’t worry about the late relpy.

The code below is my refined version from the the forum post you helped me out with here

/*--------------------------------------------------------------
Spread Content Across Page
--------------------------------------------------------------*/
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}
@media (min-width: 1280px) {
    .container {
        width: 1200px;
    }
}
@media (min-width: 1366px) {
    .container {
        width: 1280px;
    }
}
@media (min-width: 1480px) {
    .container {
        width: 1366px;
    }
}
@media (min-width: 1540px) {
    .container {
        width: 1480px;
    }
}
@media (min-width: 1580px) {
    .container {
        width: 1540px;
    }
}
@media (min-width: 1780px) {
    .container {
        width: 1580px;
    }
}
@media (min-width: 1840px) {
    .container {
        width: 1780px;
    }
}
@media (min-width: 1880px) {
    .container {
        width: 1840px;
    }
}
@media (min-width: 1920px) {
    .container {
        width: 1880px;
    }
}
.container .panel-grid {
    max-width: initial;
}
@media (min-width: 992px) and (max-width: 1280px) {
    .col-md-4.col-sm-8.col-xs-12 {
        width: 42%;
    }
}
@media (min-width: 992px) and (max-width: 1280px) {
	.col-md-8.col-sm-4.col-xs-12 {
		width: 58%;
	}
}
.col-md-4, .col-sm-8, .col-xs-12 {
	padding: 0px 5px;
}

Elementor has a ‘Full Width’ option. I would like that to follow the container in the code above. Is there a way of getting Elementor to inherit the code above to determine its full width?

Hope that makes more sense. Please don’t hesitate for me to explain any further.

Many thanks

Will

Hello Will, thank you for detailed explanation.

I don’t think that there is an easy way to do it, unfortunately.

But you can check this link that seems somewhat relevant:

Kind Regards, Roman.

Hi Roman

After something Kharis and I solved in this post Anchor Points Hidden Under Header we discovered that you can you can set a class on Elementor sections. With the code to adjust the size of the container at different screen widths using CSS media quieres

/*--------------------------------------------------------------
SPREAD CONTENT ACROSS PAGE WIDER
--------------------------------------------------------------*/
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}
@media (min-width: 1280px) {
    .container {
        width: 1200px;
    }
}
@media (min-width: 1366px) {
    .container {
        width: 1280px;
    }
}
@media (min-width: 1480px) {
    .container {
        width: 1366px;
    }
}
@media (min-width: 1540px) {
    .container {
        width: 1480px;
    }
}
@media (min-width: 1580px) {
    .container {
        width: 1540px;
    }
}
@media (min-width: 1780px) {
    .container {
        width: 1580px;
    }
}
@media (min-width: 1840px) {
    .container {
        width: 1780px;
    }
}
@media (min-width: 1880px) {
    .container {
        width: 1840px;
    }
}
@media (min-width: 1920px) {
    .container {
        width: 1880px;
    }
}
.container .panel-grid {
    max-width: initial;
}
@media (min-width: 992px) and (max-width: 1280px) {
    .col-md-4.col-sm-8.col-xs-12 {
        width: 42%;
    }
}
@media (min-width: 992px) and (max-width: 1280px) {
	.col-md-8.col-sm-4.col-xs-12 {
		width: 58%;
	}
}
.col-md-4, .col-sm-8, .col-xs-12 {
	padding: 0px 5px;
}

and then setting the class on the Elementor sections to the ‘.container’ class

and setting the layout section to ‘Full Width’ and unchecking the ‘Stretch Section’ slider works perfectly.

I’d thought I would share my success just in case others have this issue.

Will

Great, thank you for sharing that Will!

Kind Regards, Roman.