This topic is now archived and is closed to further replies.

Make Masthead 100% of screen width?

5 posts in this topic

Hi, just switched to DMS, loving it .. have tried adding a class and some right click, inspect etc to set the css to make a masthead go full width of the screen so I can set it to have a particular background color and font color for that area but I can't seem to get it


Can anyone help me with the css required please?


Any help greatly appreciated!


This is the site I'm working on..




Share this post

Link to post
Share on other sites

Add a new Full Width Section and add your Masthead into this new section.  In the section area settings -- standard options box, add a new class (don't include the dot. before the class name...just the word like-  specialclass not-  .specialclass, then in the Custom Code (LESS/CSS) box add the new class (with the dot this time) .specialclass and give it a value for background color like this;    .specialclass {background:red;}, publish it, and refresh browser, the entire (full screen width) section containing your masthead should now be red.

Share this post

Link to post
Share on other sites

Thanks for such a quick reply!


I tried dragging in a full width section but it will only go above or below the page in general?


I cannot get it to sit in between other sections like the mastheads that I have a placed a few of underneath my post loop. I can get it to sit on top of the footer, or below the footer, or above the page under the header but not in between?


Will try experimenting further with css for the div the mashead creates and giving the masthead a class and see if I can find the right selectors and css, am guessing something to do with position: relative; width: 100% !important; z-index perhaps ??


Any suggestions welcomed!


Thanks again

Share this post

Link to post
Share on other sites



If I understand correctly, you want to have the Masthead that currently has the following text.


We take care of all your development needs


To have the blue background go full width is this correct, if that is so. I have created a doc page that has instructions on how to achieve this look.


So from the instructions on the doc above, create some custom CSS using your light blue color.


.my-light-blue {

background-color: #68b4e0;



Then once you have added the the Full Width section and inserted the Masthead into it, click on the Edit icon for the Full Width section and in the Standard Options > Styling Classes, add the following:




Then click publish and refresh, your Masthead area should now appear full width :D

1 person likes this

Share this post

Link to post
Share on other sites


Share this post

Link to post
Share on other sites

  • Similar Content

      By oseehys+
      Hey Guys, i have been having some fun with PL5, on my test site, still learning and trying to master 3 sections a day, am happy the launch has been postponed its for the best lets master it as much as possible.
      But we still gat to eat with DMS for now, so my issue has been on how to reduce my pin pad size in pinspro, right now it display 3 in a row, like the default theme, but i want it to display 4 in a row, if i reduce my screen resolution to 90% it becomes 4 in a row, that is the perfect size, i cant see any css on the forum be able to reduce the size,  so guys please, please this is very important, i need the css to adjust the size, of all the css @Danny has provided on the forum i cant see anyone that focus on the size reduction except on hiding the bottom meta area, mine is just to reduce the size, checkout the images below, the image with 4 rows is the perfect size i crave to have, while the pinpad with 3 rows is what i currently need to change.
      Thanks Guys for your support all this while.
    • CSS Hero question
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' ( I read about it in the compatible plugins section of the PL5 docs ( For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • WooCommerce Checkout page broken under DMS
      By nizami+
      Seem to have fallen foul of a DMS2/WooCommerce issue. 
      All pages display correctly save the WooCommerce Checkout page, which looks like this:
      Help massively appreciated as this is the last blocker before client site launch
    • Modal Popup Background
      By abuzzelli+
      I need the modal popup background to be solid and I can't get the css to work. Not sure what to do. Here's the page:
    • Background overlay z-index
      By dawsonbarber+
      I added a background image to a container that has a textbox in it, then added a background overlay.
      The overlay "overlaid" the textbox content as well as the container background image.
      Fixing it was simple enough: I reduced the z-index on .pl-bg-overlay to 0.