Make a DIV responsive in a non-responsive site. - html

Question

I have a div in my non-responsive site which contains an ad with 120x600 pixels. I want to make the div float always at the right of the screen. For desktop or large devices it is ok But When in the Smaller device then as the site is non responsive so when site loads the div become very small. If the site would responsive then in a device of width about 400px it would cover almost all the portions of the screen. I need to do that in my non-responsive site. This is for the ads higher click through rate. A example div is -
<div id="float_rightad" style="position:fixed; top:15%; right:0;width: 160px; height:600px; z-index:5000;">
<div style="position:absolute; left:-5px; margin-top:0px; z-index:15;">
<a href="Javascript:void(0);" onclick="document.getElementById('float_rightad').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</a>
</div>
<div>
<script data-cfasync="false" type="text/javascript" src="//www.sparkadsmedia.com/adscript/120x600_english.js"></script>
</div>
</div>
How can i do that in my site?

Answer 1

You can probably achieve it by putting additional CSS3 statement in a style block like the following and also use a relative width (%) for your ads (wherever is possible):
<style type="text/css">
#media screen and (orientation: landscape ) and (max-width:400px ) {#float_rightad { YOUR STYLE PERTINENT TO SMALL SCREEN}}
#media screen and (orientation: portrait ) and (max-width:400px ) {#float_rightad { YOUR STYLE PERTINENT TO SMALL SCREEN}}
</style>
If your add contains the img element, then you can specify the image width relative (in %) to the container div; otherwise, consider using iframe element.
Hope this may help.
Best regards,