Hello X Team,

I am building a site and am trying to use the Custom Slider Layout (as opposed to the more common Auto Responsive Layout) for the revolution slider on one of my pages. The problem is that the blue border I’ve created using the slider background color and padding settings in the Appearance settings of this slider are only showing up as a border around the slides on the top and the left side. There is no border on the right side or bottom, so it looks like the slides are hanging over the blue background. I cannot find a setting or a custom css adjustment to correct this. I can’t use the auto responsive layout because the images I have for the slides are too small/low res, and when I use auto responsive layout (or full width for that matter), it stretches them and they become blurry.

Yes, I am using an old version of X and its plugins on this site build. This is because when I updated them recently, it broke my homepage layout, as well as my main navigation design. And no, I am not using a caching plugin. Not sure what’s up with that, but I figured I’d finish building the site and then try and address those problems. I have another developer designing the homepage, so I also need to let them finish that, and then try to help me debug the issues that updating created. So please don’t tell me to update my stuff and then come back here, because I can’t update right now. I am hoping instead that you can give me a setting to adjust, or some custom css that will fix this problem. This happens with the fixed layout as well, but not with auto responsive or full width.

Thanks for you help!
Rayna

Please delete background color and add this code under Customize -> Custom -> CSS :

#rev_slider_9_1 {
border: 10px solid rgb(0, 111, 186);
}

Hope it helps.

~Rayna

Thanks for writing in!

#1 & #2 : I can’t see any border on your slider. It’s the background you have set for the slider wrapper. Let’s remove it to get rid of that border like background color. Also remove the 10px padding you have set.

If you can’t figure out then you can also add the CSS through Appearance> Customize > Custom > CSS

.rev_slider_wrapper {
  background: transparent none repeat scroll 0 0 !important;
  padding: 0 !important;
}

#3 : You can add the following CSS –

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 40px;
}

Let’s change the value if needed.

Hope this helps.

Cheers!

#2 Thank you that worked great! 🙂

Please remove the border in your column, then add the code below in your custom > css in the customizer.

body .rev_slider {
    border:10px solid #744288;
}

Hope that helps.

You can add a class to your column element where your slider resides.

eg. Add blue-border class in your column

http://screencast.com/t/Om5sGKVNaZ

Then add this css code in custom > css

body .blue-border .rev_slider {
    border:10px solid blue;
}

Hope that helps.