Jump to content


Photo
- - - - -

Full Width Sections

full width fluid

Best Answer n2nguyen , 10 December 2012 - 07:41 AM

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

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 5344

5344

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 19 October 2012 - 10:47 PM

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:

Please Login or Register to see this Hidden Content



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

#2 James B

James B

    Advocate

  • Members

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

Posted 20 October 2012 - 12:31 AM

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

Please Login or Register to see this Hidden Content



#3 5344

5344

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 22 October 2012 - 03:43 PM

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

#4 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 22 October 2012 - 11:22 PM

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

#5 n2nguyen

n2nguyen

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 08 December 2012 - 02:49 PM

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

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 December 2012 - 09:45 PM

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.



#7 n2nguyen

n2nguyen

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 10 December 2012 - 04:50 AM

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.



#8 n2nguyen

n2nguyen

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 10 December 2012 - 07:41 AM   Best Answer

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



#9 n2nguyen

n2nguyen

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 10 December 2012 - 08:17 AM

got the next step figured out

 

 

/* Main Column WIDTH */
#site .content, #footer .content {
max-width: 100% !important;
}
 


#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 December 2012 - 10:53 AM

Is this issue now resolved ?



#11 n2nguyen

n2nguyen

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 10 December 2012 - 06:25 PM

yes, thx







Also tagged with one or more of these keywords: full width, fluid