Jump to content
5344

Full Width Sections

Recommended Posts

5344    1
5344

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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


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
5344    1
5344

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

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

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


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this 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.

Share this post


Link to post
Share on other sites
n2nguyen    0
n2nguyen

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
n2nguyen    0
n2nguyen

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.

Share this post


Link to post
Share on other sites
n2nguyen    0
n2nguyen

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

Share this post


Link to post
Share on other sites
n2nguyen    0
n2nguyen

got the next step figured out

 

 

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Is this issue now resolved ?


Please search our forums, before posting!

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


  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
    • zetanet
      By zetanet+
      Look the Google tour iframe in this page:
      http://www.centroodontoiatricopitino.it/photogallery/
      Is it possible to see this iframe not boxed (as you see) but in full width?
    • opwolken
      By opwolken
      I'm wondering if it's possible to apply the featured image to a page's canvas area?
      I would like to have the featured image in a canvas on the matching page.
      Thanks!
×