0

Quiero hacer que la imagen derecha pase debajo de la otra mediante responsive, lo que quiero tocar es #foto3 y #foto4 , he estado intentándolo pero no lo he conseguido y no entiendo lo que pasaba. Si alguien me pudiese ayudar lo agradecería mucho. Saludos!

@media screen and (max-width: 400px) {
  #foto2{
    max-width: 60%;
    margin-left: 20%;
  }
  #foto{
    max-width: 60%;
    margin-left: 20%;
  }
  #foto4{
    margin-left: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 600px) {
  #foto2{
    max-width: 60%;
    margin-left: 20%;
  }
  #foto{
    max-width: 60%;
    margin-left: 20%;
  } 
 
}

#foto3 {
  max-width: 40%;
  height: auto;
  margin: 20px;
  padding: 5px;
  display: inline-block;
  margin: auto;
  margin-left: 10%;
}

#foto4{
  max-width: 40%;
  height: auto;
  margin: 20px;
  padding: 5px;
  display: inline-block;
  margin: auto;
}
<div class="fotosoy">
  <img id="foto3" src="https://via.placeholder.com/150" />
  <img id="foto4" src="https://via.placeholder.com/150">
</div>

2
  • Sin tener el HTML el CSS sirve de bien poco. ¿Podrías editar la pregunta añadiéndolo?
    – phpMyGuel
    Commented el 2 jun. 2020 a las 12:24
  • si ahora lo pongo Commented el 3 jun. 2020 a las 7:49

1 respuesta 1

0

Lo primero de todo, tienes un problema estructural con las mediaqueries. Cuando trabajamos con mediaqueries con max-width estás se han de colocar de mayor a menor para que funcionen correctamente (iría antes la de 600px que la de 400px, en tu caso las tienes al revés) y además han de estar colocadas debajo de las reglas CSS que no están dentro de ninguna mediquerie para que el efecto cascada de CSS pueda hacer su trabajo (de tener las mediaqueries encima del código normal, no conseguirías sobreescribir sus propiedades, incluso estando dentro del tamaño de dispositivo establecido por ellas) .

Una vez solucionado eso, lo que podrías hacer es llegados al tamaño de pantalla deseado, hacer que cada imagen ocupe el 100% del ancho de su padre, para que de esta manera la una quede debajo de la otra, dejando de compartir "fila".

#foto3 {
  max-width: 40%;
  height: auto;
  margin: 20px;
  padding: 5px;
  display: inline-block;
  margin: auto;
  margin-left: 10%;
}

#foto4{
  max-width: 40%;
  height: auto;
  margin: 20px;
  padding: 5px;
  display: inline-block;
  margin: auto;
}

@media screen and (max-width: 600px) {
  #foto3 {
    max-width: 100%;
    width: 100%;
    margin-left: 0px;
  }
  
  #foto4 {
    max-width: 100%;
    width: 100%;
  }
}
<div class="fotosoy">
  <img id="foto3" src="https://www.affinity-petcare.com/advance/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" />
  <img id="foto4" src="https://comunidad.retorn.com/wp-content/uploads/cache/2018/09/gatitos/534533867.jpg">
</div>

1
  • Muchas Gracias me ha funcionado! Commented el 3 jun. 2020 a las 15:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.