I have a WordPress elementor page builder layout-related question. I have a section with 2 columns. The one column has a background color, I need this background color to fill the full screen (full-width layout) but the content inside the column to only be as wide as the website boxed width.
Setting the section to use full-width layout it also stretches the content full width. Setting the section to use boxed layout also box the background color. I tried setting the section to use boxed layout but with ‘stretch section’ on, and it does not do anything, the section still just looks boxed.
Please see an illustration image here: https://ibb.co/sWBSBG1
Any ideas or help on how to achieve this would be much appreciated.
2
Answers
Add a section with 2 columns. Change the section to full width layout. Add your background color or background image to the column you want.
Add an inner section with 2 columns inside each of the full width section columns. On each inner column of the inner sections add a custom class with your site width divided by 2. E.g., my site width is 1300px so I add a css class to each inner column with 650px as width.
.my-full-half-section{ width:650px!important; max-width: 650px!important; min-width: 650px!important; }
The outer columns of the inner columns will act as a margin an keep the column data inline width the website boxed width on any screen size.
You could go two ways:
make a full width section with four columns, adjust the two central columns width as it was a normal two column layout. Than apply the background to the third (the one with text) and fourth column.
make a full width section and then use the padding to adjust the width of the content. You can also use different paddings for desktop and mobile. You can also use css by giving the secion and a class or id and then use something like this:
#mysectionid {
padding: 0 5%;
}
@media screen and (max-width: 600px) {
#mysectionid {
padding: 0 10px;
}
}