Home / Questions / 361550
Accepted
Josep Giner
Asked: 2020-06-03 01:01:16 +0800 CST 2020-06-03 01:01:16 +0800 CST

How can I make one image responsive below the other?

  • 772

I want to make the right image go under the other using responsive, what I want to touch is #foto3and #foto4, I have been trying but I have not succeeded and I do not understand what happened. If someone could help me I would greatly appreciate it. Cheers!

@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>

html

1 Answers

  1. Best Answer

    First of all, you have a structural problem with mediaqueries . When we work with mediaqueries with max-widththese, they must be placed from highest to lowest so that they work correctly (the 600px would go before the 400px, in your case you have them the other way around) and they must also be placed under the CSS rules that do not they are inside no mediqueries so that the CSS cascading effect can do its job (if you had the mediaqueries on top of the normal code, you wouldn't be able to override their properties, even if you were within the device size set by them) .

    Once that's fixed, what you could do is reach the desired screen size, make each image occupy 100% of the width of its parent, so that one is below the other, ceasing to share "row" .

    #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>

    • 0