PDA

View Full Version : How to make adaptive block for mobile?



elshaaawy
Jun 25th, 2016, 07:54 PM
Hello guys. I have some code, I am creating a website, but I have some issue.
My JavaScript time is not adaptive for mobile. I tried to use percentage and position:absolute but no success.

Look at my code please



<script type="text/javascript" src="js/jquery.countdown.js"></script>
$(document).ready(function() {
$("#timer").countdown({
since: new Date(2015, 8, 6, 00, 00, 00),
format: "YODHMS",
layout: '<dl><dt id="years_lbl">YEARS</dt><dd id="years">{ynn}</dd><dt id="months_lbl">MONTHS</dt><dd id="months">{onn}</dd><dt id="days_lbl">DAYS</dt><dd id="days">{dnn}</dd><dt id="hrs_lbl">HOURS</dt><dd id="hours">{hnn}</dd><dt id="mins_lbl">MINUTES</dt><dd id="minutes">{mnn}</dd><dt id="secs_lbl">SECONDS</dt><dd id="seconds">{snn}</dd></dl>'
});
});




<article class="article-timer">
<center>
<div style="font-family:verdana; " id="timer"></div>
</center>
</article> <article class="article-timer">
<center>
<div style="font-family:verdana; " id="timer"></div>
</center>
</article>




dl { position:relative; height:80px; margin:20px auto 50px; width:810px; height:150px; background:green; font-size:1.5em; color:#000; }
dt { position:absolute; top:10px; left:0; width:135px; text-align:center; padding-top:15px; }
dd { position:absolute; top:50px; left:0; font-size:2.2em; text-align:center; width:135px; }
dt#years_lbl, dd#years { left:0; }
dt#months_lbl, dd#months { left:135px; }
dd#days { left:270px; }
dd#hours { left:405px; }
dt#mins_lbl, dd#minutes { left:540px; }
dt#secs_lbl, dd#seconds { left:675px; }
#dl * { text-outline: 1px 1px #000; }
dt#days_lbl {left:290px;}
dt#hrs_lbl {left:415px;}


May be could you help me with my issue?