图片覆盖另一张图片

Question

On MY WEBSITE I have this code:

<div>
    <center><a href="foo.html"><img src="images/ipadframe.png" width="200" height="300"></a></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: <a href="#" target="new">#</a></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"><a href="#">Visit</a></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 @media querys...

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.