Jump to content

Full-width Masthead

Recommended Posts


Hi everyone,


I've been working on this page for a few days and almost have it where I want it to be, but I need help.


On this page, I'm trying to get the masthead to be full-width and responsive, like the other sections.


I'm also trying to eliminate the buttons, the masthead meta says if no options are chosen no buttons will be displayed, but that is not the case.


If anyone can help with this, I'd greatly appreciate it!



Share this post

Link to post
Share on other sites

The masthead is in the page template area along with the content boxes below it... I did figure out the button issue, as there are two places where those have to be modified on the page's meta section and also under page options.

Share this post

Link to post
Share on other sites
James B

Hi there, when you say you want the masthead to be full width, do you mean you want the text to fill the white content area better? Or the text to go from one edge of the browser window to the other.


If you want the white area to go right to the edge of the browser you'll need to use css to set the background of the Masthead to white. At the moment that area is set within the content area of the page.


If you want the text to fill the white area better, you'll need to use css to enlarge the font-size for the masthead title and tag.


If you've not used css before, check out http://support.pagelines.me/docs/customization/custom-css/ which will give you an overview using css inside the framework and the tools we advise you use to find the correct elements to edit.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Thanks James. I'm wanting the white section to go all the way to the edges of the page. I'm just learning CSS, trying it for the first time on this page. I'll try your suggestion of making the background white and report back.

Share this post

Link to post
Share on other sites



All sections are given a similar structure of classes which you can use to style the section.


For example,


<section ID="section-name" class="section-sectionname">

<div class="texture">

<div class="content">

<div class="content-pad">


You can use these classes to style the section. Now if I understand you correctly, are you wanting to have the white background of the Masthead full width ?

If so, use the following and add your style to it.


.section-masthead .texture { } 


If you add background-color to the code above, the result will look like this:



  • Like 1

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Thanks Danny, you did understand what I wanted. When I was trying the CSS myself I was putting .masthead .texture { } and nothing was happening. I appreciate the clarification about the "section" part. Have a great day!

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

  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
      page for reference is https://www.avangocouriers.co.uk
    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
    • janpeeters
      By janpeeters
      Hi all,
      I was totally excited to find out about 'CSS Hero' (http://www.csshero.org) I read about it in the compatible plugins section of the PL5 docs (http://www.pagelines.com/resources/compatible-plugins) 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
    • abuzzelli
      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: http://bellissimoplasticsurgery.com/breast-augmentation-test-page/
    • evasnijders
      By evasnijders
      Dear fellow forum members,
      It has been months, if not years, since I got the latest DMS version. And I haven't been able to get myself to install it on my blog...
      A few months ago I took on a new job and I now know for sure I will never get to it.
      So, my question: is there anyone out there who is experienced with DMS and would be willing to do this for me.
      In all honesty, I will need help with everything, from rethinking the content (structure), to deciding on illustrations and colours. 
      I am though, willing to pay for this.
      Thanks in advance for your kind answers.