CODEWITHSUNDEEP
htmlcss
Ricardo Roa
Ricardo Roa

Reputation: 173

how to prevent image move outside margin of a div

I have an issue when I move an image.
When the browser resizes the image moves outside the class col-md-6.

This is my CSS and html:

#gradiente2 {
  background: rgba(43, 86, 162, 1.00);
  position: relative;
  padding: 0;
}

#img5 {
  position: relative;
  width: 3%;
  left: 434px;
  bottom: 74px;
  margin: 0;
  padding: 0;
  background-size: auto 0;
}
<div class="col-md-12" id="gradiente2">

  <p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor"  ]'><span class="wrap"></span> </p>
  <p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>

  <div id="movimiento">
    <img src="imagenes/kangura.png" class="img-responsive" id="img4">
    <img src="imagenes/corazon.png" class="img-responsive" id="img5">
    <button class="animar">Entregar Corazón</button>
  </div>

</div>

What am I doing wrong? Please help.

Upvotes: 0

Views: 301

Answers (1)

Keshav Bhadouria
Keshav Bhadouria

Reputation: 199

use @media for rearranging the CSS according to your requirement.

in this question, you have to change the value of

#img5{  
  left: 4px;
  bottom: 74px;
 }

Upvotes: 1

Related Questions