使倒计时时钟响应

Question

我现在已经尝试了几个小时让我的倒计时时钟响应，但没有占上风。 我正在用iPhone调整大小，但它所做的就是将时钟放在旋转木马和推荐书上。我已经包含了下面的代码，无法弄清楚我做错了什么？

我希望倒计时时钟变小，具体取决于它所在的屏幕。我使用的是HTML，PHP和CSS。

＆＃13;

＆＃13;

nav{
  font-family: Tangerine;
  font-size:45px;
  background:#9D8C77;
  border-bottom: black solid 2px;
}

.navbar-brand{
  font-size: 45px;
}

#main-footer{
  font-size: 15px;
  background-color: black;
  width:100%;
  text-align:left;
  margin:0;
  padding:0;


}

footer{
  background-color: black;
  margin:auto;
  position:fixed;
  bottom:0;
  width:100%;
  font-family: sans-serif;

}

body{
  padding-top: 150px;
  background-image: url("../img/1/brick.jpg");
  background-size: cover;
}

.countdown-wrapper {
  position: relative;
  height: 400px;


}

#countdown, #countdown-text {
    width: 800px;
    font-family: Tangerine;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.countdown {
  font-weight: 1000;
  font-size: 125px;
  color: #000;
  opacity: .9;
  letter-spacing: -2px;
}

.counter-text {
  font-weight: 900;
  font-size: 40px;
  color: #000;
  opacity: .9;
  text-align: center;

}


.timer {
  display: inline-block;
  margin: 15px;
}

.count1{
  font-size: 45px;
  font-family: tangerine;
  text-align: center;
  padding-top: 0px;
}
.count2{
  font-size: 45px;
  font-family: tangerine;
  text-align: center;
  padding-bottom: 15px;
}

＆＃13;

  <div align="center" class="container">
    <p id="demo"></p>

  <script>
    // Set the date we're counting down to
    var countDownDate = new Date("Aug 10, 2018 17:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now an the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      //Zeros
      var hours = (hours.toLocaleString(undefined,{minimumIntegerDigits: 2}));

      var minutes = (minutes.toLocaleString(undefined,{minimumIntegerDigits: 2}));

      var seconds = (seconds.toLocaleString(undefined,{minimumIntegerDigits: 2}));

      // Display the result in the element with id="demo"
      document.getElementById("daysTicker").innerHTML = days;
      document.getElementById("hoursTicker").innerHTML = hours;
      document.getElementById("minsTicker").innerHTML = minutes;
      document.getElementById("secsTicker").innerHTML = seconds;

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1000);
  </script>

  <div class="countdown-wrapper">
  <div id="countdown-text">
    <div class="timer">
      <div id="daysTicker" class="countdown"></div>
      <div class="counter-text">DAYS</div>
    </div>
    <div class="timer">
      <div id="hoursTicker" class="countdown"></div>
      <div class="counter-text">HOURS</div>
    </div>
    <div class="timer">
      <div id="minsTicker" class="countdown"></div>
      <div class="counter-text">MINS</div>
    </div>
    <div class="timer">
      <div id="secsTicker" class="countdown"></div>
      <div class="counter-text">SECS</div>
    </div>
    <h1 class="count1"><strong>Until We are Mr and Mrs</h1>
    <h1 class="count2">Hasta que seamos Señor y Señora</strong></h1>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

@import "testimonials.css";
@import "rsvp.css";

nav{
  font-family: Tangerine;
  font-size:45px;
  background:#9D8C77;
  border-bottom: black solid 2px;
}

.navbar-brand{
  font-size: 45px;
}

#main-footer{
  font-size: 15px;
  background-color: black;
  width:100%;
  text-align:left;
  margin:0;
  padding:0;


}

footer{
  background-color: black;
  margin:auto;
  position:fixed;
  bottom:0;
  width:100%;
  font-family: sans-serif;

}

body{
  padding-top: 150px;
  background-image: url("../img/1/brick.jpg");
  background-size: cover;
}

.countdown-wrapper {
  position: relative;
  height: 400px;
}

#countdown, #countdown-text {
    width: 100%;
    font-family: Tangerine;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.countdown {
  font-weight: 900;
  font-size: 140px;
  color: #000;
  opacity: .7;
  letter-spacing: -4px;
}

.counter-text {
  font-weight: 900;
  font-size: 40px;
  color: #000;
  opacity: .8;
  text-align: center;
}


.timer {
  display: inline-block;
  margin: 10px;
}

.count1{
  font-size: 45px;
  font-family: tangerine;
  text-align: center;
  padding-top: 0px;
}
.count2{
  font-size: 45px;
  font-family: tangerine;
  text-align: center;
  padding-bottom: 15px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
      <head>
          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

          <!-- Bootstrap CSS -->

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
          <link rel="stylesheet" href="css/style.css">
          <link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet'>
          <title>Steve and Bárbara's Boda</title>
       </head>

  <header>
      <nav class="navbar fixed-top navbar-expand-sm navbar-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Brand -->
          <a class="navbar-brand" href="#">Steve and Bárbara's Boda</a><br>



          <!-- Links -->
          <div class="collapse navbar-collapse justify-content-end" id="nav-content">
            <ul class="navbar-nav">
                <li class="nav-item">
                <a class="nav-link active" href=".../...">Home</a>
                <li class="nav-item">
                  <!--<a class="nav-link" href=".../rsvp.html">RSVP/S.R.C</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href=".../about.html">About/Sobre</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href=".../map.html">Map/Mapa</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href=".../contact.php">Contact/Contacto</a>-->
                </li>
              </ul>
        </nav>
    </header>

    <body>
      <main>
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <div id="carouselExampleIndicators" class="carousel slide container" data-ride="carousel" style="width:auto; margin:0 auto;">
                <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              </ol>
              <!--carousel images stored in img/1 folder -->
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="img/1/1.png" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="img/1/2.png" alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="img/1/3.png" alt="Third slide">
                </div>
              </div>
              <!--carousel controls -->
              <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <script>
        // Set the date we're counting down to
        var countDownDate = new Date("Aug 10, 2018 17:00:00").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

          // Get todays date and time
          var now = new Date().getTime();

          // Find the distance between now an the count down date
          var distance = countDownDate - now;

          // Time calculations for days, hours, minutes and seconds
          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          var seconds = Math.floor((distance % (1000 * 60)) / 1000);

          //Zeros
          var hours = (hours.toLocaleString(undefined,{minimumIntegerDigits: 2}));

          var minutes = (minutes.toLocaleString(undefined,{minimumIntegerDigits: 2}));

          var seconds = (seconds.toLocaleString(undefined,{minimumIntegerDigits: 2}));

          // Display the result in the element with id="demo"
          document.getElementById("daysTicker").innerHTML = days;
          document.getElementById("hoursTicker").innerHTML = hours;
          document.getElementById("minsTicker").innerHTML = minutes;
          document.getElementById("secsTicker").innerHTML = seconds;

          // If the count down is finished, write some text
          if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
          }
        }, 1000);
      </script>


        <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-4">
            <div class="countdown-wrapper">
            <div id="countdown-text">
              <div class="timer">
                <div id="daysTicker" class="countdown"></div>
                <div class="counter-text">DAYS</div>
              </div>
              <div class="timer">
                <div id="hoursTicker" class="countdown"></div>
                <div class="counter-text">HOURS</div>
              </div>
              <div class="timer">
                <div id="minsTicker" class="countdown"></div>
                <div class="counter-text">MINS</div>
              </div>
              <div class="timer">
                <div id="secsTicker" class="countdown"></div>
                <div class="counter-text">SECS</div>
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="row">
        <div class="col-sm-12">
          <div align="center" class="testimonials">
              <div class="container" id="bride1">
                <img src="img/1/barb1.jpg" alt="Avatar" style="width:90px">
                <p class="text1"><span>Bárbara.</span> The Beautiful Bride.</p>
                <p class="text2"></p>
                <p class="text3"></p>
                <p class="text3">.</p>
                <p class="text3">.</p>
                <P></p><hr>
                <p class="text1"><span>Bárbara.</span> la Hermosa Novia.</p>
                <p class="text2"></p>
                <p class="text4"></p>
                <p class="text4">.</p>
                <p class="text4">N</p>


              </div>
              <div class="container" id="groom1">
                <img src="img/1/steve1.jpg" alt="Avatar" style="width:90px">
                <p class="text1"><span>Steve.</span> The Happy Groom.</p>
                <p class="text2"></p>
                <p class="text3">
                <p class="text3">
                <p class="text3">t.</p>
                <p></p><hr>
                <p class="text1"><span>Steve.</span> El Feliz Novio.</p>
                <p class="text2">.</p>
                <p class="text4"> .</p>
                <p class="text4"></p>
                <p class="text4"></p>

              </div>
            </div>
          </div>
        </div>



      </main>
      <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
    <footer id="main-footer">&copy 2018 Steve meadows Web Developer
    </footer>
</html>

＆＃13;

＆＃13;

＆＃13;

刚刚使用自举网格进行了编辑，但倒计时仍未通过网格调整大小..如果可能，有人可以帮助..新代码位于底部。

非常感谢