How to make a Full Width Column stretch the entire page using Enfold ? - Support

Tagged: column, custom, enfold, full width

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 7, 2014 at 11:36 am #261243

Vicken
Participant

I can not seem to figure out how to make a column stretch the fullwidth of a page like a layer slider does.

How do I do this? Please Help.

May 8, 2014 at 4:55 pm #261872
Yigit
Keymaster
Hi Vicken!

Please add a Color Section element to your page and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
Then add following code to Quick CSS in Enfold theme options under General Styling tab
```
#your-custom-id .container { width: 100%; }
```
Regards,
Yigit
December 11, 2015 at 12:04 pm #550959
wizzbit
Participant
I like to add that there is also a max-width on the container. So the code should be:
```
#your-custom-id .container { 
	width: 100%; 
	max-width: none;
}
```
- This reply was modified 8 years, 11 months ago by wizzbit.
December 11, 2015 at 1:52 pm #551038

Yigit
Keymaster

Hi!

@wizzbit Thank you for your input! On newer version of Enfold, yes. It was not needed on older versions :)
http://kriesi.at/documentation/enfold/color-section-with-100-container/

Regards,
Yigit

July 5, 2016 at 4:39 pm #657149
Ship-ST
Participant
Hi,
I tried both codes, as well as :
```
/* Full width pages */
#FullWidthSection .container {
    width: 98% !important;
max-width: none !important;
}
```
But my page is never full width. Could you have a look?
Thanks.
July 5, 2016 at 5:26 pm #657168
Yigit
Keymaster
Hey!

Please change the code to following one
```
#fullwidthsection .container {
    width: 98% !important;
max-width: none !important;
}
```
Cheers!
Yigit
July 6, 2016 at 11:39 am #657392

Ship-ST
Participant

Thanks it works!

July 6, 2016 at 12:31 pm #657407

Yigit
Keymaster

Hey!

You are welcome! Let us know if you have any other questions or issues :)

Regards,
Yigit
Author

Posts