Hey guys,
I’m having a little trouble making my revolution slider responsive on my website.
http://www.pddesign.com.au/index.php
Here is my attempt to fix the problem http://www.pddesign.com.au/index4.php
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 
Hi,
I don;t think its as simple as that as you would need something like this:
.slotholder{left:0!important;top:0;right;0;bottom:0}
.slotholder img{ left:0!important;
right:0!important;
width:100%!important;
height:auto!important;
}
.slider{
height:auto!important;
padding-bottom:36.2%;
}
.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 http://www.pddesign.com.au/index.php
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
Hi,
Maybe try forcing the learn more button issue.
e.g.
button.caption{left:0!important}
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 
I may have to take your advice here.
Thank you for the bxslider link, gave it a quick whirl and failed (http://www.pddesign.com.au/index2.php) so going to investigate flexslider and see if that works for me.
It works for me ok.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://www.pddesign.com.au/js/jquery.bxslider.min.js"></script>
<!--<script src="http://www.pddesign.com.au/js/jquery.bxslider.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<link href="http://www.pddesign.com.au/css/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<div id="bxslider">
<ul class="bxslider">
<li><img src="http://www.pddesign.com.au/img/slides/sml-business-banner.png" alt="launch your small business banner" /> </li>
<li><img src="http://www.pddesign.com.au/img/slides/seo-banner.jpg" alt="search engine optimisation banner" /> </li>
<li><img src="http://www.pddesign.com.au/img/slides/responsive-banner.png" alt="responsive banner" /> </li>
</ul>
</div>
</body>
</html>
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
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
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 http://www.pddesign.com.au/index4.php
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 http://www.pddesign.com.au/
Just need to figure out how to get rid of the snapping image when at “mobile” size
Hi,
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.
.slider-container,.slider{
margin:0!important;padding:0!important}
.slider-container{
margin:0 -20px !important;max-width:none!important}
You are the CSS Sensei, that fixed the problem.
Working flawlessly now I’m so happy!
Thank you for your help, I really really appreciate it!