Jump to content


Photo
- - - - -

Make individual section full width

full width section individual

  • Please log in to reply
16 replies to this topic

#1 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 02 October 2013 - 10:05 PM

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?



#2 Danny

Danny

    Is Awesome!

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

Posted 03 October 2013 - 09:45 AM

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.



#3 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 03 October 2013 - 05:37 PM

Hey Danny,

 

Thank you. How do I change the script?



#4 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 03 October 2013 - 09:44 PM

I forgot to reply @Danny



#5 James B†

James B

    Advocate

  • DMS Subscriber†
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 October 2013 - 12:04 AM

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.



#6 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 04 October 2013 - 03:47 AM

@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.



#7 Danny

Danny

    Is Awesome!

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

Posted 04 October 2013 - 07:39 AM

I recommend you contact the support from where you received the script from, they're will be able to assist you further.

#8 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 04 October 2013 - 04:17 PM

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.



#9 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 04 October 2013 - 04:46 PM

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.



#10 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 04 October 2013 - 06:24 PM

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



#11 Rob

Rob

    One Smart Egg

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

Posted 04 October 2013 - 09:04 PM

@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.



#12 BentleyD†

BentleyD

    Super Member

  • DMS Subscriber†
  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 04 October 2013 - 10:09 PM

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.



#13 James B†

James B

    Advocate

  • DMS Subscriber†
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 October 2013 - 12:57 AM

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;
}


#14 Objectif-Mariage†

Objectif-Mariage

    Advanced Member

  • DMS Subscriber†
  • 54 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 30 March 2015 - 06:34 PM

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.pagelin...ge/#entry226904
If you have the solution, i will be very thankful.

 

Alex



#15 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 March 2015 - 08:01 PM

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.pagelin...ge/#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.



#16 Objectif-Mariage†

Objectif-Mariage

    Advanced Member

  • DMS Subscriber†
  • 54 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 30 March 2015 - 08:05 PM

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 ? 



#17 Danny

Danny

    Is Awesome!

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

Posted 31 March 2015 - 01:08 PM

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%;} 







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