Jump to content


Photo
- - - - -

Full width content box


Best Answer catrina , 16 April 2013 - 07:48 PM

The Masthead section is full-width (see the blue section at the top of this page: http://support.pagelines.me/docs/) so you can probably get away with using the Masthead section (http://support.pagel...tions/masthead/) and using CSS to change the background image to the photo you want. For this, you’ll need to use Custom CSS (in PageLines > Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions: http://support.pagel...ion/custom-css. For help with the background image attribute, please see these instructions: http://w3schools.com...ound-image.asp.

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 irenefarrimond

irenefarrimond

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 16 April 2013 - 07:28 PM

Hi there,

 

I am trying to make a content box on my website fill the full width of the browser, while all other sections remain within the contraints I have set. 

 

I have selected "Full width sections" but this does not appear to be working. 

 

I've tried many variations of 

 

#contentbox{

width: 100%;

max-width: 100%;

 

with different classes, ids, pixel widths and percentages to no avail. My goal is to have one photograph the full width of the browser. 

 

Please advise! 

 

Irene



#2 irenefarrimond

irenefarrimond

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 16 April 2013 - 07:29 PM

Also, I should mention the site is still on my local server so I can't give a link. 



#3 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 16 April 2013 - 07:48 PM   Best Answer

The Masthead section is full-width (see the blue section at the top of this page:

Please Login or Register to see this Hidden Content

) so you can probably get away with using the Masthead section (

Please Login or Register to see this Hidden Content

) and using CSS to change the background image to the photo you want. For this, you’ll need to use Custom CSS (in PageLines > Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions:

Please Login or Register to see this Hidden Content

For help with the background image attribute, please see these instructions:

Please Login or Register to see this Hidden Content



#4 irenefarrimond

irenefarrimond

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 16 April 2013 - 07:54 PM

Thank you! That worked to get the image in there in the background. How can I scale it, and make it respond responsively?

 

Thanks again! 



#5 irenefarrimond

irenefarrimond

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 16 April 2013 - 07:59 PM

figured it out! thanks!! 



#6 sersanet

sersanet

    Advanced Member

  • Members
  • 72 posts
  • Country: Country Flag

Posted 17 June 2013 - 08:06 PM

Cograts

Please Login or Register to see this Hidden Content

on solving the problem,

 

Is there any chance that you would share the result with some who are still trying to figure out the solution?

 

Many thanks in advance..

 

Catrinas post was good, but if you look at the links she posted, they are not set 100% for Masthead but for Highlight..

 

why is it so difficult to get an answer here, seem like the developers of pagelines do not want to give any real answers...

 

like the answer to making the contenbox 100% full width responsive is... =



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 June 2013 - 09:57 PM

Hi Sersanet

 

When you select the layout to go full width inside the site layout option then that means the background of each section and it's container will fill the entire width of the screen. The content inside that section will still be placed inside the content area, which you set via dragging the layout width in the layout editor etc.

 

To get a single item to break out of the content area isn't easy. The only way I've seen it done is to use negative margins vs positive padding on the section. See

Please Login or Register to see this Hidden Content

 

Unfortunately the moderating team aren't able to provide customization code directly to help make changes, only to provide the relevant links to resources to assist you in learning to make the required changes. Any advanced changes would be best going through a pagelines pro www.pagelines.com/pros/