Say you want to use the 2-column section but you want it to be full-width instead of content-width.
You could drag whatever you want into each column, and it’ll look cool (see screenshot below). Plus, it’s responsive so the left half will stack on top the right half on smaller screens.
Add Some LESS CSS
Here’s the code you need to add to your Custom Code area of the DMS Editor (or in your child theme’s style.less file):
Add this CSS Class to the Canvas Area that your Content-Width Section(s) is in
Then just add this custom CSS class to the Canvas Area section in which you’ll place content-width sections to become full-width sections:
Before and After
This will also work with other sections, not just columns!
Removing the Gap between Columns
If you wanted the columns to not have a gap between them (like the above screenshot example from Media Temple), you’d need to override the margin-left and the width of the columns.
The code needed to close the gap is already provided as .row-closed in dms/dms/less/mixins.less, but it’s not possible to easily implement at this time, but I requested it to be.
Another alternative is to just make each column’s background color the same as your Canvas Area’s background color so it looks like there’s no space between the columns.