Can't get my slider banner to behave responsive :(

Hey guys,

I’m having a little trouble making my revolution slider responsive on my website.

Here is my attempt to fix the problem

Make every element within the slider width 100% height:auto

Hi Bkp,

I would have thought that would have fixed it but unfortunately it did not work :frowning:


I don;t think its as simple as that as you would need something like this:

.slotholder img{ left:0!important;
.slider ul,.slider-container{max-height:none!important}

The above are over-rides so stick them at the end of the css and see if that’s what you meant. If not then you can easily remove them.

Hi PaulO

Thank you for your help. This is definitely the furtherest progress I have had with this problem. Was only saying tonight to my friend how frustrating problems in html/css can be at times without an extra set of eyes to help you.

I added those CSS hacks to my custom.css file and the index page is looking a look better

The “Learn More” button has gone awol, but it’s responding which is awesome!

Also noticed when you click the round buttons the image has to snap into place on the next slide.

Looking much better, thank you


Maybe try forcing the learn more button issue.



It’s quite hard to over-ride some of those dynamic behaviours with css alone. Sometimes its better to go with a responsive slider from the start :slight_smile:

I may have to take your advice here.

Thank you for the bxslider link, gave it a quick whirl and failed ( so going to investigate flexslider and see if that works for me.

It works for me ok.

		<meta charset="utf-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src=""></script>
		<!-- bxSlider Javascript file -->
		<script src=""></script>
		<!--<script src=""></script>-->
		<script type="text/javascript">
		<link href="" rel="stylesheet" />

		<div  id="bxslider">
				<ul class="bxslider">
						<li><img src="" alt="launch your small business banner" /> </li>
						<li><img src="" alt="search engine optimisation banner" /> </li>
						<li><img src="" alt="responsive banner" /> </li>

Jquery needs to be the first JS file in the html otherwise the bxslider won’t be able to use it. You also need one of the bxslider files. One is a minimised version and one is the full version. You don’t use both :slight_smile:

Of course as you have a number of js files in your page there may be other conflicts but as a stand alone demo the code above is working.

Looks like the Jquery location was causing the issue.

IMO I have way too many js files on my page. Too many css files too. I haven’t touched the foundations of my website in about a year. I have forgotten where everything is located. It’s a bit of a nightmare. I kind of wish I have less dynamic code going on because I run into little issues such as these.

I kind of wish I have less dynamic code going on because I run into little issues such as these.

Yes sometimes simpler is better :slight_smile:

Hi PaulO

I have tried a new method using “Revolution Slider”

I replaced your css hack with

body .tp-bannershadow {
	display: none;

body div.slider {
	max-height: none;

body .slider ul {
	visibility: hidden;

body .revslider-initialised ul {
	visibility: visible;

You can see it at

Responsive is working well, buttons are a little off centre and transitions are incorrect.

Can you believe I can’t find the Revolution Slider Documentation

What a nightmare this slider has become!

Ok I think I got it working finally :slight_smile:

Just need to figure out how to get rid of the snapping image when at “mobile” size


If you are reffering to the slight jump at smaller sizes then that seems related to the negative margins you are using. I quite often see this happen on animation inside elements with negative margins.

Try adding this to see if its the problem.

margin:0 -20px !important;max-width:none!important}

You are the CSS Sensei, that fixed the problem.

Working flawlessly now :slight_smile: I’m so happy!

Thank you for your help, I really really appreciate it!