Problema con el slider de una galeria de fotos que no es responsive

Hola, soy nuevo, estaba haciendo esta codificacion en HTML y CSS, pero el problema es que funciona en modo de escritorio (Desktop) pero no en moviles (Responsive).

Quisiera saber en que error he cometido y como se puede solucionar.

Aqui el codigo:

EN HTML:

<div class="slider">

<input type="radio" id="sbutton1" name="sradio">
<label for="sbutton1"></label>
<input type="radio" id="sbutton2" name="sradio">
<label for="sbutton2"></label>
<input type="radio" id="sbutton3" name="sradio">
<label for="sbutton3"></label>
<input type="radio" id="sbutton4" name="sradio">
<label for="sbutton4"></label>

<ul>
<li><img src="images/galerias/outdoor/foto01.jpg" alt="foto01"></li>
<li><img src="images/galerias/outdoor/foto02.jpg" alt="foto02"></li>
<li><img src="images/galerias/outdoor/foto03.jpg" alt="foto03"></li>
<li><img src="images/galerias/outdoor/foto04.jpg" alt="foto04"></li>
</ul>

</div>

EN CSS:

.slider{
width: 700px;
height: 360px;
display: flex;
flex-wrap: wrap;
overflow:hidden;
}

input[type="radio"]{
display: none;
}

input[type="radio"] + label{
display: block;
width: 25%;
height: 60px;
cursor: pointer;
order: 2;
border: 1px solid #000;
}

.slider ul{
width: 400%;
height: 300px;
display: flex;
list-style: none;
order: 1;
transition: all 0.9s;
}

#sbutton1 + label{
background: url(images/galerias/outdoor/foto01.jpg);
background-size: 100% 100%;
}

#sbutton2 + label{
background: url(images/galerias/outdoor/foto02.jpg);
background-size: 100% 100%;
}

#sbutton3 + label{
background: url(images/galerias/outdoor/foto03.jpg);
background-size: 100% 100%;
}

#sbutton4 + label{
background: url(images/galerias/outdoor/foto04.jpg);
background-size: 100% 100%;
}

#sbutton1:checked ~ ul {
margin-left: 0;
}

#sbutton2:checked ~ ul {
margin-left: -100%;
}

#sbutton3:checked ~ ul {
margin-left: -200%;
}

#sbutton4:checked ~ ul {
margin-left: -300%;
}

@keyframes slider{

0%, 20%{
margin-left: 0;
}

25%, 40%{
margin-left: -100%;
}

45%, 70%{
margin-left: -200%;
}

75%, 100%{
margin-left: -300%;
}

}

Mas bien otra consulta, si pongo en el ".slider ul" el codigo "animation: slider 20s infinite;", funciona la automatizacion, pero para escoger las figuras pequeñas no sirve, quisiera saber como se soluciona esta parte tambien. Espero que cualquiera me de su pronta respuesta. Gracias.

hola. yo lo que hago con el slider es dentro de cada li colocar un div que ocupe toda la pantalla (si así debe ser, obvio). puedes utilizar medidas viewport vh vw pero al colocar los madia queries para los moviles debes pasar esas medidas a pixeles porque algunos navegadores no lo toman. cada div tiene una imagen diferente de fondo, cuyas propiedades son (entre otras):
.slide-content-01 {
background-image: url(img/img-01.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display: block;
height: 100vh;
width: 100vw;
}

acá puedes ver un ejemplo en el cual estoy trabajando: http://sonidosdistantes.com.ar/pilcha/
el cual por ahora es adaptable a 320 y 360.

Gracias amigo, pero eso no es lo que necesitaba, pero si, al poner un div se realiza el responsive pero solo el input y el label, pero aquí el que juega es el la “img” ya que al estar unido con input y el label realiza esa función como carrusel y lo malo es que la “img” tiene una medición fija. Esa medición fija es el problema lo resto si esta ok, o mejor dicho en resumen tanto como la IMG y el INPUT y LABEL están unidos como nodos.

Y otra cosa me olvidava estoy trabajando con 960px (usando plantilla de 960grid de 12 columnas) de ancho todo el BODY y un margin: 0 auto para que este centrado.

Gracias de todos modos en ayudarme, espero que con esto aclare lo que estoy buscando.

la img es el fondo de la caja de cada <li>. por lo tanto tengo tantas cajas como <li>.
caja-1, caja-2, caja-3 etc.
esas cajas solo se diferencian en el fondo que cargan. esta img de fondo debe se un poco mas grande que su contenedor y el background-size:cover; hace que la imagen se adapte a su contenedor de manera proporcional como en el link que te pasé. acá ese mismo slide:
<div class="caja-01">
<div id="slide">
<ul id="galeria" name="galeria">
<li ><div class="slide-content-01">
<div class="slide-right-01">
<div class="icono-slide"><a href="#"><svg viewBox="0 0 100 100">
<use xlink:href="svg/suitcase.svg#SUITCASE_1_"/>
<path style="fill:#FFF;" d="M0,21v37c0,1.657,1.343,3,3,3h5V18H3C1.343,18,0,19.343,0,21z M32,3c-8.284,0-15,6.716-15,15h-6v43h42V18h-6
C47,9.716,40.284,3,32,3z M23,18c0-4.971,4.029-9,9-9c4.971,0,9,4.029,9,9H23z M61,18h-5v43h5c1.657,0,3-1.343,3-3V21
C64,19.343,62.657,18,61,18z"/>
</svg></a></div><!--FIN ICONO--><h6>Lorem ipsum dolor sit amet.</h6>
<div class="slide-txt">Consectetur adipiscing elit. Suspendisse eget dolor eget odio bibendum interdum.</div></div></div></li>
<!--FIN SLIDE 01-->
<li class="noselected"><div class="slide-content-02"><div class="slide-right-02"><div class="icono-slide"><a href="#"><svg viewBox="0 0 80 80">
<use xlink:href="svg/tags.svg#TAGS_1_"/>
<path style="fill:#FFF;" d="M56.113,26.872l-5.133-4.91c-0.006,0.009-0.012,0.019-0.017,0.028L34.126,5.884C33.582,5.338,32.831,5,32,5
c-0.003,0-0.005,0.001-0.008,0.001V4.993H13V5c-1.657,0-3,1.343-3,3h22l24.081,23.155L56.3,30.9l0.002,0.001
C56.73,30.383,57,29.726,57,29C57,28.168,56.66,27.415,56.113,26.872z M54.997,35.951c-0.001-0.087-0.004-0.174-0.013-0.26
c-0.002-0.016-0.006-0.03-0.008-0.045c-0.01-0.086-0.021-0.17-0.039-0.254c0-0.002,0-0.002,0-0.004
c-0.123-0.594-0.422-1.123-0.84-1.531L31.126,11.884C30.582,11.338,29.831,11,29,11c-0.003,0-0.005,0.001-0.008,0.001v-0.008H10
V11c-1.657,0-3,1.343-3,3H6.993v19.049h0.013c0.015,0.878,0.409,1.657,1.023,2.196l-0.011,0.012l25,23l0.006-0.005
c0.395,0.348,0.879,0.594,1.418,0.693c0.021,0.005,0.045,0.008,0.067,0.011c0.067,0.011,0.134,0.022,0.202,0.028
C34.807,58.995,34.902,59,35,59c0.916,0,1.734-0.411,2.284-1.059l0.001,0.002l17-20l-0.001-0.002C54.73,37.418,55,36.741,55,36
C55,35.984,54.998,35.968,54.997,35.951z M15,23c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S17.209,23,15,23z"/>
</svg></a></div><!--FIN ICONO--><h6>Integer vel elit nisi.</h6><br /><div class="slide-txt">Aenean lorem enim non justo at nam ut mattis sapien. </div></div></div></li><!--FIN SLIDE 02-->
<li class="noselected"><div class="slide-content-03"><div class="slide-right-03"><div class="icono-slide"><a href="#"><svg viewBox="0 0 80 80">
<use xlink:href="svg/user_circle.svg#USER_3_"/>
<path style="fill:#FFF;" d="M32,0C14.327,0,0,14.327,0,32s14.327,32,32,32s32-14.327,32-32S49.673,0,32,0z M51.253,49.43
c-3.767-1.826-2.382-0.398-7.31-2.427c-5.041-2.073-6.235-2.749-6.235-2.749L37.664,39.5c0,0,1.888-1.422,2.477-5.917
c1.178,0.338,1.578-1.372,1.642-2.464c0.069-1.055,0.696-4.346-0.745-4.052c0.295-2.197,0.527-4.183,0.421-5.235
c-0.36-3.691-2.931-7.544-9.42-7.826c-5.517,0.282-9.098,4.138-9.46,7.829c-0.104,1.052,0.108,3.036,0.403,5.236
c-1.441-0.297-0.821,2.999-0.758,4.054c0.07,1.092,0.46,2.809,1.641,2.469c0.587,4.495,2.475,5.93,2.475,5.93L26.293,44.3
c0,0-1.195,0.724-6.236,2.796c-4.927,2.027-3.544,0.512-7.31,2.334C8.568,44.816,6,38.715,6,32C6,17.641,17.641,6,32,6
c14.359,0,26,11.641,26,26C58,38.716,55.432,44.816,51.253,49.43z"/></svg></a></div><!--FIN CICONO--><h6>Integer vel elit nisi.</h6><br /><div class="slide-txt">Aenean lorem enim non justo at nam ut mattis sapien. </div></div></li><!--FIN SLIDE 03-->
</ul></div><!--FIN SLIDE--></div><!--FIN CAJA 01-->

como veras. el slide está dentro de caja-01.
y acá el css:
.caja-01 {
display: block;
height: 100vh;
width: 100%;
background-size: cover;
background-color: #FFF;
overflow: hidden;
float: none;
}

/* -------------SLIDER------------- */
#slide {
width: 100%;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
height: 100%;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
background-color: #000;
}
.slide-content-01 {
background-image: url(img/slide-01.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display: block;
height: 100vh;
width: 100vw;
}
.slide-right-01 {
color: #FFF;
display: block;
float: right;
height: 10vh;
width: 20vw;
margin-top: 40vh;
margin-right: 10vw;
position: absolute;
z-index: 2;
text-align: left;
right: 5vw;
top: 40vh;
}
.slide-right-02 {
color: #FFF;
display: block;
float: right;
height: 10vh;
width: 20vw;
margin-top: 40vh;
margin-right: 10vw;
position: absolute;
z-index: 2;
text-align: left;
right: 5vw;
top: 10vh;
}
.slide-right-03 {
color: #FFF;
display: block;
float: right;
height: 10vh;
width: 20vw;
margin-top: 20vh;
margin-right: 0vw;
position: absolute;
z-index: 2;
text-align: left;
right: 10vw;
top: 10vh;
}
.slide-txt {
font-family: 'Dosis', sans-serif;
display: inline;
font-size: 90%;
}

.icono-slide {
display: block;
float: left;
height: 40px;
width: 50px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 20px;
}
.icono-slide:hover {
transform: scale(1.1);
}
.slide-content-02 {
background-image: url(img/slide-02.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display: block;
height: 100vh;
width: 100vw;
}
.slide-content-03 {
background-image: url(img/slide-03.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display: block;
height: 100vh;
width: 100vw;
}
#galeria{
margin: 0;
padding: 0;
position: relative;
list-style: none;
overflow: hidden;
height: 100%;
width: 100%;
float: left;
display: block;
}
#galeria li{
position: absolute;
height: auto;
width: 100%;
margin: 0px;
float: left;
}
#galeria li img{
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 100vh;
visibility: visible;
}
#galeria .selected{
z-index: 1;
opacity: 1;
-moz-transition: all 3s ease 0s;
-ms-transition: all 3s ease 0s;
-o-transition: all 3s ease 0s;
-webkit-transition: all 3s ease 0s;
transition: all 3s ease 0s;
}
#galeria .noselected{
z-index: 0;
opacity: 0;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
display: block;
}
/* -------------FIN SLIDER------------- */

la img es el fondo de la caja de cada <li>. por lo tanto tengo tantas cajas como <li>.
caja-1, caja-2, caja-3 etc.
esas cajas solo se diferencian en el fondo que cargan. esta img de fondo debe se un poco mas grande que su contenedor y el background-size:cover; hace que la imagen se adapte a su contenedor de manera proporcional como en el link que te pasé. acá ese mismo slide:

Código HTML :

<div class="caja-01">   
    <div id="slide">
  <ul id="galeria" name="galeria">
<li ><div class="slide-content-01">
  <div class="slide-right-01">
    <div class="icono-slide"><a href="#"><svg viewBox="0 0 100 100">
   <use xlink:href="svg/suitcase.svg#SUITCASE_1_"/>
   <path style="fill:#FFF;" d="M0,21v37c0,1.657,1.343,3,3,3h5V18H3C1.343,18,0,19.343,0,21z M32,3c-8.284,0-15,6.716-15,15h-6v43h42V18h-6
            C47,9.716,40.284,3,32,3z M23,18c0-4.971,4.029-9,9-9c4.971,0,9,4.029,9,9H23z M61,18h-5v43h5c1.657,0,3-1.343,3-3V21
            C64,19.343,62.657,18,61,18z"/>
    </svg></a></div><!--FIN ICONO--><h6>Lorem ipsum dolor sit amet.</h6>
    <div class="slide-txt">Consectetur adipiscing elit. Suspendisse eget dolor eget odio bibendum interdum.</div></div></div></li>
<!--FIN SLIDE 01-->    
<li class="noselected"><div class="slide-content-02"><div class="slide-right-02"><div class="icono-slide"><a href="#"><svg viewBox="0 0 80 80">
   <use xlink:href="svg/tags.svg#TAGS_1_"/>
   <path style="fill:#FFF;" d="M56.113,26.872l-5.133-4.91c-0.006,0.009-0.012,0.019-0.017,0.028L34.126,5.884C33.582,5.338,32.831,5,32,5
            c-0.003,0-0.005,0.001-0.008,0.001V4.993H13V5c-1.657,0-3,1.343-3,3h22l24.081,23.155L56.3,30.9l0.002,0.001
            C56.73,30.383,57,29.726,57,29C57,28.168,56.66,27.415,56.113,26.872z M54.997,35.951c-0.001-0.087-0.004-0.174-0.013-0.26
            c-0.002-0.016-0.006-0.03-0.008-0.045c-0.01-0.086-0.021-0.17-0.039-0.254c0-0.002,0-0.002,0-0.004
            c-0.123-0.594-0.422-1.123-0.84-1.531L31.126,11.884C30.582,11.338,29.831,11,29,11c-0.003,0-0.005,0.001-0.008,0.001v-0.008H10
            V11c-1.657,0-3,1.343-3,3H6.993v19.049h0.013c0.015,0.878,0.409,1.657,1.023,2.196l-0.011,0.012l25,23l0.006-0.005
            c0.395,0.348,0.879,0.594,1.418,0.693c0.021,0.005,0.045,0.008,0.067,0.011c0.067,0.011,0.134,0.022,0.202,0.028
            C34.807,58.995,34.902,59,35,59c0.916,0,1.734-0.411,2.284-1.059l0.001,0.002l17-20l-0.001-0.002C54.73,37.418,55,36.741,55,36
            C55,35.984,54.998,35.968,54.997,35.951z M15,23c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S17.209,23,15,23z"/>
    </svg></a></div><!--FIN ICONO--><h6>Integer vel elit nisi.</h6><br /><div class="slide-txt">Aenean lorem enim non justo at nam ut mattis sapien. </div></div></div></li><!--FIN  SLIDE 02-->
<li class="noselected"><div class="slide-content-03"><div class="slide-right-03"><div class="icono-slide"><a href="#"><svg viewBox="0 0 80 80">
   <use xlink:href="svg/user_circle.svg#USER_3_"/>
   <path style="fill:#FFF;" d="M32,0C14.327,0,0,14.327,0,32s14.327,32,32,32s32-14.327,32-32S49.673,0,32,0z M51.253,49.43
            c-3.767-1.826-2.382-0.398-7.31-2.427c-5.041-2.073-6.235-2.749-6.235-2.749L37.664,39.5c0,0,1.888-1.422,2.477-5.917
            c1.178,0.338,1.578-1.372,1.642-2.464c0.069-1.055,0.696-4.346-0.745-4.052c0.295-2.197,0.527-4.183,0.421-5.235
            c-0.36-3.691-2.931-7.544-9.42-7.826c-5.517,0.282-9.098,4.138-9.46,7.829c-0.104,1.052,0.108,3.036,0.403,5.236
            c-1.441-0.297-0.821,2.999-0.758,4.054c0.07,1.092,0.46,2.809,1.641,2.469c0.587,4.495,2.475,5.93,2.475,5.93L26.293,44.3
            c0,0-1.195,0.724-6.236,2.796c-4.927,2.027-3.544,0.512-7.31,2.334C8.568,44.816,6,38.715,6,32C6,17.641,17.641,6,32,6
            c14.359,0,26,11.641,26,26C58,38.716,55.432,44.816,51.253,49.43z"/></svg></a></div><!--FIN CICONO--><h6>Integer vel elit nisi.</h6><br /><div class="slide-txt">Aenean lorem enim non justo at nam ut mattis sapien. </div></div></li><!--FIN  SLIDE 03-->
</ul></div><!--FIN SLIDE--></div><!--FIN CAJA 01-->

como veras. el slide está dentro de caja-01.
y acá el css:

Código CSS :

.caja-01 {
   display: block;
   height: 100vh;
   width: 100%;
   background-size: cover;
   background-color: #FFF;
   overflow: hidden;
   float: none;
}

/* -------------SLIDER------------- */
#slide {
   width: 100%;
   position: relative;
   margin-top: 0px;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 0px;
   height: 100%;
   left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
   overflow: hidden;
   background-color: #000;
}
.slide-content-01 {
   background-image: url(img/slide-01.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size:cover;
   display: block;
   height: 100vh;
   width: 100vw;
}
.slide-right-01 {
   color: #FFF;
   display: block;
   float: right;
   height: 10vh;
   width: 20vw;
   margin-top: 40vh;
   margin-right: 10vw;
   position: absolute;
   z-index: 2;
   text-align: left;
   right: 5vw;
   top: 40vh;
}
.slide-right-02 {
   color: #FFF;
   display: block;
   float: right;
   height: 10vh;
   width: 20vw;
   margin-top: 40vh;
   margin-right: 10vw;
   position: absolute;
   z-index: 2;
   text-align: left;
   right: 5vw;
   top: 10vh;
}
.slide-right-03 {
   color: #FFF;
   display: block;
   float: right;
   height: 10vh;
   width: 20vw;
   margin-top: 20vh;
   margin-right: 0vw;
   position: absolute;
   z-index: 2;
   text-align: left;
   right: 10vw;
   top: 10vh;
}
.slide-txt {
   font-family: 'Dosis', sans-serif;
   display: inline;
   font-size: 90%;
}

.icono-slide {
   display: block;
   float: left;
   height: 40px;
   width: 50px;
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: #FFF;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-right: 20px;
}
.icono-slide:hover {
   transform: scale(1.1);
}
.slide-content-02 {
   background-image: url(img/slide-02.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size:cover;
   display: block;
   height: 100vh;
   width: 100vw;
}
.slide-content-03 {
   background-image: url(img/slide-03.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size:cover;
   display: block;
   height: 100vh;
   width: 100vw;
}
#galeria{
   margin: 0;
   padding: 0;
   position: relative;
   list-style: none;
   overflow: hidden;
   height: 100%;
   width: 100%;
   float: left;
   display: block;
}
#galeria li{
   position: absolute;
   height: auto;
   width: 100%;
   margin: 0px;
   float: left;
}
#galeria li img{
   width: 100%;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   height: 100vh;
   visibility: visible;
}
#galeria .selected{
   z-index: 1; 
   opacity: 1; 
   -moz-transition: all 3s ease 0s;
   -ms-transition: all 3s ease 0s;
   -o-transition: all 3s ease 0s;
   -webkit-transition: all 3s ease 0s;
   transition: all 3s ease 0s;
}
#galeria .noselected{
   z-index: 0;
   opacity: 0;
   -moz-transition: all 1s ease 0s;
   -ms-transition: all 1s ease 0s;
   -o-transition: all 1s ease 0s;
   -webkit-transition: all 1s ease 0s;
   transition: all 1s ease 0s;
   display: block;
}
/* -------------FIN SLIDER------------- */