0

I'm new to this and i created a div. Can any one suggest how to change it to a responsive view. The code is:

    <body>
<style>
div {
  display: inline-block;
  position: relative;
  z-index : 1;
}
div img { border: 1px red solid; display: block; }
div + img { position: absolute; z-index: 100; top: 200px; right: 600px; }
</style>
<div>
 <div>
  <img src="w2.jpg" alt="" style="height: 315px; width: 851px;" />
 </div>
 <img src="w3.jpg" alt="" style="height: 160px; width: 160px;" />
 </div>
 </body>
Syam S G
  • 39
  • 5
  • check this link it will helpful:http://stackoverflow.com/questions/12933356/change-div-order-on-responsive-design – soorapadman Sep 22 '15 at 09:24
  • You'll find some help [here](http://stackoverflow.com/questions/29971189/constructing-a-responsive-website) about creating a responsive website – jbutler483 Sep 22 '15 at 09:32
  • You have to write CSS in different break points. [This](http://stackoverflow.com/a/32693280/3465753) might help you – J Santosh Sep 22 '15 at 11:04

1 Answers1

0

Try the updated code like the snippet at https://jsfiddle.net/c0vpp862/ 

<div>
 <div>
  <img src="http://localhost/arp/isol_cms/wp-content/themes/twentythirteen/images/img/s5.png" alt="" style="height: 315px;" />
 </div>
 <img src="w3.jpghttp://localhost/arp/isol_cms/wp-content/themes/twentythirteen/images/img/s5.png" alt="" style="height: 160px;" />
 </div>

Style

div {
  display: inline-block;
  position: relative;
  z-index : 1;
}
div img { border: 1px red solid; display: block; }
div + img { position: absolute; z-index: 100; top: 200px; right: 600px; }

I just removed th width of both the images, if you want you can set width = 100% and remove the height of the images,

Arpita
  • 1,386
  • 1
  • 15
  • 35