• 0
Sign in to follow this  
Followers 0

Featured Slider Width - A Solution

Question

Posted · Report post

Many have questioned how to narrow the width of the Featured Slider to the size of the loop (main content area) and have the sidebar to the side of the slider. I know this has been frustrating many and want to offer a quick solution. In the Platform Pro Custom Code section, under Custom CSS, add the following, replacing XXX with the width of your main content area (as set in Layout Editor. #feature_slider div.default-features {width: XXXpx;} #feature-area {width: XXXpx} .home #feature-footer {width: XXXpx;} .home #feature_slider{width:XXXpx;} .home #sidebar-wrap{margin-top:-680px;} .home #feature-area, .feature-wrap {width: XXXpx;} .home #feature-footer {width: XXXpx;} The result should be to narrow your slider and move the sidebar(s) up. But, remember to change the width of your images to match the set width you desire. Many thanks to Catrina and Makeylon for their generous contributions and help in this. Without them, I'd be just as frustrated looking for a solution.

Share this post


Link to post
Share on other sites

57 answers to this question

  • 0

Posted · Report post

I tried this and then added this : #feature_slider.default-features div{width: 778px;} #feature-footer.dots{width: 778px;} The first line adjusts the image to the container and the second allows to adjust dot navigation. Sadly this dose not "move the sidebar up", so its pretty pointless... still looking for a solution. Did it work for some of you?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

good work

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You will likely need to adjust this .home #sidebar-wrap{margin-top:-680px;} to the height you desire. On one implementation of mine it worked perfectly to bring the sidebar up to exactly where I needed it. In another installation, I had to adjust from -680 to -370.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I successfully moved the sidebar up but the links are not active. What am I doing wrong? My sidebar is on the left.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Never mind I figured it out

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

would you mind sharing the CSS block ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That's what i was looking for. But i can't get the sidebar up to the top. Its down right under the feature.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

S-inderbitzi, are you using Buddypress?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Buddypress has a tendency to push sidebars below the slider and keep them there.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

it is down there since i inserted the css from this post. And its not just at the feature sides but on every side.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Send a link to your site so I can see what's happening. Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah. The featured slider is too wide to allow the sidebar to move up. Look at the width of the map image, plus the width of the slider and consider there is padding around the sidebar and the slider. Add it all up and it's greater than the total width of your layout. Narrow down the slider or widen the layout and it should resolve.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't get it. I'm sorry. How to change the featured slider?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You follow the CSS code at the top of this discussion and go into the Featured Slider settings and replace the images with ones that are narrower. Whatever number you're using for the width should be no wider than the Content Area width found in the Layout Settings. If your layout is 650px (for example), then your slider should be 630px (allowing for padding). If your slider is 700 and the layout is narrower, the slider will push the content area wider, pushing and keeping your sidebar down.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ahhh ok. i get it. Thanks. I'll try to change that.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay. No prob. If you need more help, don't hesitate to ask.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

maybe i don't get it right. I just changed the width of the images. Now the slider and the images are 780 and the layout is 804 so that should be working now, shouldn't it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The entire layout is 804 or the content area of the layout is 804?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

In the PlatformPro > Layout Editor, what is total Global Content Width?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

the global content width is 1052

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

when you look at the page at the moment. I took away the navigation bar of the feature and you can see the white bar. Maybe thats the problem?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nearly there.... in my case the sidebar disappears completely. If I add the code to change the sidebar, it vanishes off all pages, which really gets fun trying to navigate around the site! I've added "float:right;" to all the css statements above. link to site & page that's the problem: http://www.ornsby.com.au/dummy/lisaperks http://www.ornsby.com.au/dummy/lisaperks/singers/ Any help will be most appreciated!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try adding this to your custom code: #feature_slider {width: XXXpx;} (change XXX to the width you have set for the slider). That should get rid of the thin white line below the slider and allow the side bar to move up.

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
Sign in to follow this  
Followers 0