• 0

Make Masthead 100% of screen width?


Question

Posted · Report post

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..

 

www.startcode.co.uk

 

Thanks

Dominic

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi,

 

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.

 

http://docs.pagelines.com/tutorials/section-area-styling

 

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:

 

my-light-blue

 

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Cheers!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now