Pagelines DMS Full Width Section

Glenn Glenn's Blog 0 Comments

Pagelines DMS is a great Framework for building awesome WordPress sites on, but it isn’t perfect (just yet anyway). It is however extensible and if for example you want a module/area of your site to do something you can simply create a custom section (see Pagelines Docs on creating a Section). We’ve already created a few for our own specific needs and it is relatively straightforward for a competent developer. Anyway I digress…

A major drawback we find is that even when in ‘Full Width Display’ mode (se in Settings / Layout & Nav) section content is still annoyingly are set via the Pixel or percentage width of the screen. Now if like us you also like to use all the real estate width of the page then that’s not ideal. Thankfully it’s actually quite straightforward to rectify this with just one line of CSS. here’s how.

  1. Edit your section and in the ‘Styling Classes’ give it a class of your choosing. Let’s say ‘.my-full-width-section’ (replace with your own class)
  2. Save / Publish the change in DMS
  3. Add the following to your .less or .css style sheet
[css]
.my-full-width-section .pl-content {
max-width: none!important;
}
[/css]

Using .Less

You could also achieve the same effect if you were using .less by simply nesting the css like so:-

[css]
.class-of-div-to-be-full-width {
.pl-content {
max-width: none!important;
}
}
[/css]

Or you could create a Mixin to save time and make loads of sections full-width with repeating css:-

[css]
.full-width-section {
.pl-content {
max-width: none!important;
}
}
[/css]

Apply the Mixin:-

[css]
.class-of-div-to-be-full-width {
.full-width-section;
}
[/css]

NB Please do be careful not to add the Mixin class directly to the Pagelines section when editing – it must be applied to your .less file on the element to be full width. If you don’t then it could well mess up the DMS.

In all cases save your CSS (Flush the Cache in DMS if updating .less file) and refresh your page. The section is now full width!

About the Author
Pagelines DMS Full Width Section Pagelines DMS Full Width Section 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *