Jump to content

Archived

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

BentleyD

Make individual section full width

Recommended Posts

BentleyD

Hey guys,

 

I was wondering if you could help me to make only one of my sections wider than the rest. On WebsiteAlright.com there is a scrolling section titled clients. I would like it to be the full width of the page leaving the other sections the same width they are now. How can I achieve this?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Add the following to your custom CSS:

 

#pl_area70tz5o .pl-content {
max-width: 100%;
}

 

You will also need to change the width of your script, as it has a fixed width too, if you don't your scroller will be aligned to the left.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
BentleyD

Hey Danny,

 

Thank you. How do I change the script?

Share this post


Link to post
Share on other sites
BentleyD

I forgot to reply Danny

Share this post


Link to post
Share on other sites
James B

Hi,

 

It looks like the script has been placed into a widget from what I can see in the source code. If that's the case you'll be abel to adjust the width inside the code that has been pasted into the widget via appearance>widgets from the wp admin area.


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
BentleyD

James B Thank you for the reply. Yeah you can edit the width of the scroller, but it's still determined by the container. So it can go wider but you can't see it because the container is too small. I want it to be the width of the Rev Slider wall to wall.

Share this post


Link to post
Share on other sites
Danny
I recommend you contact the support from where you received the script from, they're will be able to assist you further.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
BentleyD

But it's a pagelines issue. Pagelines creates the width of the container the widget is in. I can make the width of the widget wider but I cannot make the Paglines container wider. Please help.

Share this post


Link to post
Share on other sites
Jake

Hi BentleyD - I recommend you try the Section Area section which is full-width by default and drop the code in a widget or text box within that area.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
BentleyD

I tried the code in both the highlight and the widget with no change. Any other ideas?

Share this post


Link to post
Share on other sites
Rob

BentleyD

 

Where exactly are you placing the code? And are you modifying it for the specific section? The example code Danny provided was for a very specific section.  I think he also referred to modifying the script, as it may be limiting full-width placement.  You'd have to inspect it using a tool like Chrome's Inspector or Firebug to find out what width it allows in its CSS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
BentleyD

The widget script is easily editable through the settings on the back end and i can change the width to anything I want, but the container still dictates whats visible. I tried implementing the code under the section, highlight and widget through the style box.

Share this post


Link to post
Share on other sites
James B
Hi there,
 
The section is control by the css applied to the full width display class, currently it's showing a max width set of 1043px. Try changing this to none and using the class for the carousel section like below to tweak the container.
 
body.display-full .pl-content .widgetizerb7yxbs {
    margin: 0 auto;
    max-width: none;
}

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
Objectif-Mariage

Hello James B
It's quite an old post, but I see that you use  " body.display-full  .pl-content  "! I actually, I want tu use it, but only on One page (not all).

I have created a post on this problem here : http://forum.pagelines.com/topic/38567-customize-bodydisplay-full-on-only-one-page/#entry226904
If you have the solution, i will be very thankful.

 

Alex

Share this post


Link to post
Share on other sites
Simon

Hello James B
It's quite an old post, but I see that you use  " body.display-full  .pl-content  "! I actually, I want tu use it, but only on One page (not all).

I have created a post on this problem here : http://forum.pagelines.com/topic/38567-customize-bodydisplay-full-on-only-one-page/#entry226904
If you have the solution, i will be very thankful.

 

Alex

Every page/post in wordpress has a unique pageid body class, just use that. You can see the body classes by viewing the source of the page.

Share this post


Link to post
Share on other sites
Objectif-Mariage

Every page/post in wordpress has a unique pageid body class, just use that. You can see the body classes by viewing the source of the page.

Hi Simon_P

 

Thank you ! 

Yes the pageid , of the page i wanted to apply is : page-id-36266

But , when i do this : 

.page-id-36266 body.display-full .pl-content { max-width: 100%;} 

It just does not work's ....... 

That's why I wonder how to do ? How should I wright it right ? 

Share this post


Link to post
Share on other sites
Danny

Your code is not correct, you can not use the body tag when you're already including a class that is assigned to the body tag. Therefore, remove it from the code like so:

 

.page-id-36266.display-full .pl-content { max-width: 100%;} 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • sakkthi subramaniyam
      By sakkthi subramaniyam
      Working on a very old site which has  pagelines framework theme. I need section plugin. so i can install postpins section. I have lost backup copy.
      Thank you.
    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • 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!
    • flourishdesignstudio
      By flourishdesignstudio+
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
×