image overlay another image - html

Question

On MY WEBSITE
I have this code:
<div>
<center><img src="images/ipadframe.png" width="200" height="300"></center>
</div>
<div style="position:absolute; left:233; top:35;">
<img src="images/xclomobi.jpg" width="152" height="233">
</div>
<div class="section_w280 fl">
<ul class="future_project"><br><br>
<li>Website: #</li>
<li>Role:<font size="2"> CSS / PHP / MYSQL</font></li>
<li>#li>
</ul>
<div class="cleaner"></div>
</div>
<div class="section_w140 fr"><br><br>
<div class="rc_btn_02">Visit</div>
<div class="cleaner"></div>
</div>
<div class="margin_bottom_20 border_bottom"></div>
</div>
which displays perfectly on my desktop but not on my ipad or smaller screens.
how do I edit the div style above so that it loads reads an alternative code when viewing this on a device listed above?
Is there a way to get it to display correctly no matter what device they are viewing it on?

Answer 1

What you need is implement Responsive design by using #mediaquerys...
iPAD Portrait and Landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPAD LANDSCAPE
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPAD PORTRAIT
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
By using this, you can set the CSS styles only for that device...
Also need to read this...

Answer 2

Another alternative I find myself jumping into are responsive frameworks like Bootstrap or Foundation by ZURB. They provide a stunning amount of components to get you on your responsive way in record time. Both have their pros and cons, you should eval which one suits your needs.