Making the default homepage slider responsive

Hi,



Does anyone know how to make the homepage slider repsonsive on version 4?



I have used the following code which works great on desktop version, but it looks like there is some jquery dynamically setting the height and width which is overwriting some of my code?





.cm-slider-window {

width: 100%;

overflow: hidden;

position: relative;

height: 0 !important;

padding: 0 0 24% 0;

}

.cm-slide-page-reel img {

max-width: 100%;

height: auto;

}





Any help would be much appreciated.

Hi,

By “slider responsive” do you mean full screen i believe, because cs-cart is not responsive ;)





Valentin

[color=#808080][size=2]part of hungryweb.net[/size][/color]

I have made the template responsive already. By creating a new Bootstrap CSS file, we we able to create a responsive template.



The problem I have with the slider is that there is some jquery that overwrites the CSS height and width, breaking my responsive CSS code

You can make css style !important and that should override jquery styles

Please PM me with a link from the site, because now i am blind and i don't know how to quide you





Valentin

[color=#808080][size=2]part of hungryweb.net[/size][/color]

Got it! The jQuery already responds based on the container width when the page is refreshed. When you resize the browser window the slider does not degrade automatically, but does when you refresh!



Just in case anyone requires it, this is all I needed to make it responsive!



.homepage-banners {

margin-top: 10px;

}

.cm-slider-window {

width: 100%;

overflow: hidden;

position: relative;

height: 0 !important;

padding: 0 0 24% 0;

}

.cm-slide-page-reel img {

max-width: 100%;

height: auto;

}

you can use [url=“.resize() | jQuery API Documentation”]http://api.jquery.com/resize/[/url] ;)