Adding Media Query

Question

I want to make my countdown timer responsive in mobile view I want to make it responsive in mobile device such a way that it should be like a list days ,hours,min,seconds how to do that ?

jsfiddle

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div id="main">
            <div class="content">
                <div class="text">
                </div>
                <!-- /.Text Div -->
                <div class="counter">
                    <h3>Registration Closes In :</h3>

                    <div id="countdown"><span class="days">10 <b>Days</b></span> <span class="hours">7 <b>Hours</b></span> <span class="minutes">26 <b>Minutes</b></span> <span class="seconds">58 <b>Seconds</b></span></div>
                    <!-- /#Countdown Div -->
                </div>
                <!-- /.Counter Div -->
            </div>
            <!-- /.Content Div -->
        </div>
        <!-- /#Main Div -->
    </div>
    <!-- /.Columns Div -->
</div>
<!-- /.Row Div -->

read and understand https://www.w3schools.com/css/css_rwd_mediaqueries.asp and then you know, how to do this with media queries. — errand, Jun 30 '17 at 11:36
i know media query but i dont know how to solve this issue using that — Akash Dikkaram, Jun 30 '17 at 11:42
sry then i don't understand your question - could you attach an image of how the times shall be displayed? — errand, Jun 30 '17 at 11:44
pls check the js fiddle and resize into mobile view i want the timing to be in order — Akash Dikkaram, Jun 30 '17 at 11:49
aah you want to avoid line breaks within the span elements. check the solutions of https://stackoverflow.com/questions/7300760/prevent-line-break-of-span-element or https://stackoverflow.com/questions/15749279/how-to-avoid-content-of-span-break-in-two-lines — errand, Jun 30 '17 at 11:52
Possible duplicate of [How to avoid content of span break in two lines?](https://stackoverflow.com/questions/15749279/how-to-avoid-content-of-span-break-in-two-lines) — errand, Jun 30 '17 at 11:53

score 0 · Answer 1 · answered Jun 30 '17 at 12:21

According to what I understood, you are asking for, How to calculate the time difference between Today and the FinalDay ?

var today = new Date();
var FinalDay = new Date("7-01-2017 18:00");
var milliSecondsRemaining = (FinalDay - today); // milliseconds between now & FinalDay
var daysRemaining = Math.floor(milliSecondsRemaining / 86400000); // days
var hoursRemaining = Math.floor((milliSecondsRemaining % 86400000) / 3600000); // hours
var minutesRemaining = Math.round(((milliSecondsRemaining % 86400000) % 3600000) / 60000); // minutes
alert("Registration Closes In" + daysRemaining + " Days, " + hoursRemaining + " Hours, " + minutesRemaining + " Minutes");

Hope this solves your problem.

Adding Media Query

1 Answers1