Jump to content
Sign in to follow this  
irenefarrimond

Full width content box

Recommended Posts

irenefarrimond    0
irenefarrimond

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

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
irenefarrimond    0
irenefarrimond

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

figured it out! thanks!! 

Share this post


Link to post
Share on other sites
sersanet    7
sersanet

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
James B    436
James B

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/


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

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

Sign in to follow this  

×