Archived

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

  • 0

Full width content box

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

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.pagelines.me/docs/sections/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.pagelines.me/docs/customization/custom-css. For help with the background image attribute, please see these instructions: http://w3schools.com/cssref/pr_background-image.asp.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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! 

Share this post


Link to post
Share on other sites

Posted · Report post

figured it out! thanks!! 

Share this post


Link to post
Share on other sites

Posted · Report post

Cograts irenefarrimond

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://www.pagelines.com/forum/topic/27415-full-width-headernav-with-fixed-width-site/

 

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/

Share this post


Link to post
Share on other sites