I’ll say right away that I tried to set percentages and remove position: absolute, but it didn’t work ... Code

$(document).ready(function() { $("#timer").countdown({ since: new Date(2015, 8, 6, 00, 00, 00), http: //ru.stackoverflow.com/editing-help 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>' }); }); 
 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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.countdown.js"></script> <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>

  • I can't edit CSS ... sorry ... - user3654202

1 answer 1

One of the most important things that should be in the code inside the <head> tag is meta, which tells the browser that the site should also be displayed correctly on mobile devices <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes"/> for example like this. And in css you should also apply @media () {}; to check the width of the screen.

The second is that I also advised to use Bootstrap, which will make it easier for you as a whole to write css-markup and classes for mobile devices

PS I do not understand who teaches people to use in CSS and in layout binding to ID styles, this is a very bad tone, moreover, the ID must always be unique and your code will grow like a mushroom under good conditions, but as a result of what you were clearly told, that this type will work faster and considering the volume of css contents (file size and number of lines), and the processing speed itself is not much faster if you bind the style through the class ... in short, you will make it worse. You do not need to use an ID to tie a style to an element. You only complicate your life.

 $(function() { $(".timer").countdown({ since: new Date(2015, 8, 6, 00, 00, 00), format: "YODHMS", layout: '<dl><dt class="years_lbl">YEARS</dt><dd class="years">{ynn}</dd><dt class="months_lbl">MONTHS</dt><dd class="months">{onn}</dd><dt class="days_lbl">DAYS</dt><dd class="days">{dnn}</dd><dt class="hrs_lbl">HOURS</dt><dd class="hours">{hnn}</dd><dt class="mins_lbl">MINUTES</dt><dd class="minutes">{mnn}</dd><dt class="secs_lbl">SECONDS</dt><dd class="seconds">{snn}</dd></dl>' }); }); .timer { font-family:verdana; } <article class="article-timer"> <center> <div class="timer"></div> </center> </article> <article class="article-timer"> <center> <div class="timer"></div> </center> </article>
  • Site on WordPress. The site itself is adaptive, but I added this piece myself. I do not know how to do with media queries. Can you write? I say, tried with percentages - does not work - user3654202
  • Can you tell? It does not work .. - user3654202