Jump to content

Archived

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

BentleyD

Make individual section full width

Recommended Posts

BentleyD+    2
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    1,327
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+    2
BentleyD

Hey Danny,

 

Thank you. How do I change the script?

Share this post


Link to post
Share on other sites
BentleyD+    2
BentleyD

I forgot to reply Danny

Share this post


Link to post
Share on other sites
James B    436
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+    2
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    1,327
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+    2
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    74
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+    2
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    547
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+    2
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    436
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+    4
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    247
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+    4
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    1,327
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

    • 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!
    • 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
    • PierreFF
      By PierreFF+
      Hello Everyone, 
      I think this one is for the pagelines team. 
      I have some trouble with the Adventure section plugin https://www.pagelines.com/product/pl-section-adventure/ that doesn't seem to load in any of the three websites I run using pagelines. 
      I do the setup via the extend platform as usual. It tells me that the plugin is installed and activated but unfortunately it doesn't appear on the page editor.
      I have just tried it consecutively with three websites I own with the same result.
      My intention was to use it with this website: http://launchpadweekend.foundersofthefuture.co/ (free version)
      And I also tried with this website http://foundersofthefuture.co/ (pro license) and this one http://ffactor.me/ (free version). And I have the same problem with each. 
      I would love to see how I could solve this issue. 
      Thanks a lot. 
      Pierre
       
×