Turn this slider really responsive

Question

So, what I need do for this slider resize correctly in diferents resolutions, for I get responsive.

I tryed that slider

The HTML

<div id="slider">
                <div id="controleplay">
                    <div id="autoplay"><img src="imagens/pausa.png" width="48" height="48"/></div>
                    <div id="button-next"><img src="imagens/seta_dir.png" width="48" height="48"/></div>
                </div>
                <div class="sp" ><img src="imagens/banners/w6-resultados.jpg" width="" height="auto" />
                    <h2><span>  Chegamos e damos boas vindas <br> ao nosso site! </span></h2></div>
                <div class="sp"><a href="noticia.html"><img src="imagens/banners/w6-sistema.jpg" width="" height="auto" />
                    <h2><span>  Solutions  </span></h2></a></div>
                <div class="sp"><a href="noticia.html"><img src="imagens/banners/w6-slogan.jpg" width="" height="auto" /></a></div>
                <div class="sp" ><img src="imagens/banners/w6-design.jpg" width="" height="auto"/>
                    <h2><span> Sofisticação presente <br> em nossos produtos e serviços </span></h2></div> 
        </div>

The Css

#slider {width:100%; height:380px; overflow:hidden; position:relative;}
#slider span {position: absolute; bottom: 0px; left: 0px; text-align:center; width: 100%; color: white; font: 24px/45px "Roboto", Arial, monospace;
background:rgb(0, 0, 0); /* fallback color */  background:rgba(0, 0, 0, 0.9); filter:alpha(opacity=90); opacity:.9;}
.sp {width:100%; height:380px; position:absolute; overflow:hidden;}
#controleplay {position:absolute; width:100%; z-index:98; bottom:0; }
#button-next {float:right; background-color:#00476b;cursor:pointer;}
#autoplay {float:left; background-color:#00476b;cursor:pointer;}

Here > http://jsfiddle.net/3yv59qf3/3/

Answer 1

Check out @media for css here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

You can detect device window sizes and make your app's css respond to that. If it's 1200px or more you know it's a desktop for example and can add styling just for that and take it away for tablets at 992px, etc.

Here's an example of @ media at mobile device size:

@media (max-width: 768px) {
    .jumbotron {
        margin-top: 91px;
    }
    .container {
        margin-top: 101px;
    }
}

When the window is smaller than 768px, the class "jumbotron" will get a margin-top of 91px, etc.

Here's an example of how to catch the in-between sizes, so if the screen is in between a tablet and a desktop size (like if someone is using a smaller browser window size on their desktop or something):

@media (min-width: 769px) and (max-width: 1199px) {
    .jumbotron {
        margin-top: 51px;
    }
    .container {
        margin-top: 61px;
    }
}

When the window size is greater than 786px but less than 1199px (1200 is for desktop), "jumbotron" will only have a top margin of 51px. That should help you get to where you want to go.