Any Section can be Full-Width

Posted · 1 Comment

DMS 2-Column Section thumbSay 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.

MediaTemple-net 2 Column Full Width Example

MediaTemple.net 2 Column Full Width Example

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:

Add makestuffinsidefullwidth to Canvas Area

Add makestuffinsidefullwidth to Canvas Area

Before and After

Before

Before

After

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.

One Response to "Any Section can be Full-Width"
  1. James Giroux says:

    Great idea! Why didn’t I think of this.

Comments are closed.