Full Width Sections

[5344 1]

Hey,

I have not been here since pagelines 2.0 when I got a Dev licence but soon gave up to just use more basic frameworks as I found somewhat restricted by pagelines.

I now have some time to dive back into it and wanted to know if they have built a easy system to have certain areas full width such as the header on this page:

http://pagelines.me/

Do they have any drag and drop features yet to do this? It seems a little cleaned up and would like to experiment again.

[James B 436]

Hi there,

Yes the framework has a an option for full width sections now, you can find it inside the layout editor.

You can find out more here http://www.pagelines.com/wiki/How_to_Use_the_Layout_Editor_Settings

[5344 1]

Sorry I dont see where you can set specific sections only to be full width. I have accomplished making the entire site full width but that is not what I want.

Thanks

[mackenzie 12]

Are you looking for full width headers and footers? Which sections are you looking to apply this to?

[n2nguyen 0]

Has there been any progress on this discussion? I'm new to pagelines and wondering the same. It seems the full width option doesn't actually give you 100% width. It gives you something like 97% How do you make the site truly full width? Thx

[Rob 547]

Full width is set to leave some background space to make sure that there's room for browser vertical slides and padding to allow the background to show.

 

I don't think there's anything to update or change. Going to an absolute 100% would likely cause too many problems, with the lack of space to allow vertical navigation and some degree of visibility to offset the content.

 

Backgrounds can, at present (and since Framework was first released), display full width, edge to edge.  There are also some background plugins that also do this which work within Framework.

[n2nguyen 0]

I'm able to modify it to be 100% full width on desktop view. Unfortunately, when viewed using smaller screen, that's when it's less than 100% full width. I think I need to modify the media query, but don't even know where to begin.

[n2nguyen 0]

I partially figured it out

 

This custom css is not exactly full size, but visually works for my needs right now until I can figure out the next step.

 

Using Pagelines Layout Editor, Full Width was specified. However, there is still space left at the margin. This codes overrides that. However, the main column still has the width of 1340px.

 

 

/*Full width site*/

.fullwidth #column-main .mcolumn-pad {

    padding-left: 0px;

    padding-right: 0px;

}

.content .content-pad {

    padding: 0px;

}

.responsive #site .content, .responsive #footer .content, .responsive.fixed_width #page {

    width: auto ;

}

 

I also made the QuickSlider full width

 

/* Full width QuickSlider */

#quickslider .texture .content {

  width: 100%;

  padding: 0;

  margin: 0px auto;

}

 

 

Now, how do I get rid of the 1340px main column?

 

thx

[n2nguyen 0]

got the next step figured out

 

 

/* Main Column WIDTH */

#site .content, #footer .content {

max-width: 100% !important;

}

 

[Danny+ 1,327]

Is this issue now resolved ?

[n2nguyen 0]

yes, thx