Stop CSS animation from also changing size of the box and button?-CodePudding

I have an animated circle () that grows and shrinks. However, it also causes the button () to grow and shrink and the box () that they're in to grow taller to accommodate the size change. How can I make it so just the circle changes size and not the rest?

Working example:

//---TIMER---//
var remainingTime = 30;
var isStopped = true;

const countContainer = document.getElementById('sec');
const renderTime = () => {
  remainingTime -= 1;
  countContainer.innerHTML = remainingTime;
  if (remainingTime === 0) {
    isStopped = true;
    clearInterval(timer);
    remainingTime = 30;
  }
}

const startTimer = () => {
  if (isStopped) {
    isStopped = false;
    countContainer.innerHTML = remainingTime;
    timer = setInterval(renderTime, 1000);

  }
}

document.getElementById('start').addEventListener('click', function() {
  document.getElementById('circle').classList.add('animate');
});

const startButton = document.getElementById('start');

startButton.onclick = startTimer;

// const stopTimer = () => {
//     isStopped = true;
//     if (timer) {
//         clearInterval(timer);
//     }
// }

// const resetTimer = () => {
//     isStopped = true;
//     clearInterval(timer);
//     clearInterval(animate);
//     remainingTime = 30;
//     countContainer.innerHTML = remainingTime; 

// }






//---CARD OBJECTS---//
// const neck = ['Chin tuck', 'Neck extension', 'Neck towel', 'Side-to-side']
// let neckStretch1 = 'Chin tuck'
// let neckStretch2 = 'Neck extension'
// let neckStretch3 = 'Neck towel'
// let neckStretch4 = 'Side-to-side'

// const shoulder = ['Desk pec stretch', 'Doorway pec stretch', 'Overhead reach', 'W to Y', 'Cross body']
// let shoulderStretch1 = 'Desk pec stretch'
// let shoulderStretch2 = 'Doorway pec stretch'
// let shoulderStretch3 = 'Overhead reach'
// let shoulderStretch4 = 'W to Y'
// let shoulderStretch5 = 'Cross body'

// const hand = ['One-by-one', 'Wrist extensor', 'Wrist flexor']
// let handStretch1 = 'One-by-one'
// let handStretch2 = 'Wrist extensor'
// let handStretch3 = 'Wrist flexor'

// const lowBack = ['Low back rotation', 'Bending over', 'Seated knee to chest', 'Seated pelvic tilt']
// let lowBack1 = 'Low back rotation'
// let lowBack2 = 'Bending over'
// let lowBack3 = 'Seated knee to chest'
// let lowBack4 = 'Seated pelvic tilt'

// const hip = ['Kneeling psoas stretch', 'Standing psoas stretch', 'Seated glute stretch', 'Seated cross-body glute']
// let hipStretch1 = 'Kneeling psoas stretch'
// let hipStretch2 = 'Standing psoas stretch'
// let hipStretch3 = 'Seated glute stretch'
// let hipStretch4 = 'Seated cross-body glute'

// const leg = ['Seated hamstring stretch', 'Butterfly stretch', 'Standing quad stretch', 'Chair quad stretch', 'Seated abductor stretch']
// let legStretch1 = 'Seated hamgsting stretch'
// let legStretch2 = 'Butterfly stretch'
// let legStretch3 = 'Standing quad stretch'
// let legStretch4 = 'Chair quad stretch'
// let legStretch5 = 'Seated abductor stretch'

//---CARD DECK---//
mobiscroll.settings = {
  theme: 'ios',
  themeVariant: 'light'
};
mobiscroll.listview('.cardDeck', {
  stages: [{
    percent: -20,
    action: function(event, inst) {
      inst.move(event.target, 0);
      return false;
    }
  }, {
    percent: 20,
    action: function(event, inst) {
      inst.move(event.target, 0);
      return false;
    }
  }],
  actionable: false
});
// function dropdownFunction() {
//     document.getElementById("myDropdown").classList.toggle('show')
// }

// function dropdownFunction() {
//     var x = document.getElementById('dropdownClick')
//     if (x.style.display === 'none') {
//         x.style.display = 'block'
//     }else {
//         x.style.display = 'none'
//     }
// }

// document.getElementById("menu").addEventListener("click", dropdownFunction()); 

// function dropdownFunction() {
// //    var x = document.getElementById("dropdownClick").style
//     const toggle = document.getElementById("myDropdown")
//     const toggleList = document.getElementsByTagName("li");
//     console.log(toggle.style.display)
//     if (toggle.style.display !== null) {
//         console.log("one")
//         toggle.style.display = 'inline-block'
//         toggleList.style.display = 'inline-block'

//     }else {
// //        x.display = 'none'
//         console.log("two")
//     }
// }


// ---BODY ICON ---//
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.body-image')) {
    var dropdowns = document.getElementsByClassName("dropdown-list");
    showEvent = 'show';
    for (var i = 0; i < dropdowns.length; i  ) {
      var currentElement = dropdowns[i],
        currentElementAsString = dropdowns[i].toString();
      if (currentElementAsString.localeCompare(showEvent)) {
        currentElement.classList.remove('show');
      }
    }
  }
}

body {
  font-family: 'Gentium Book Plus', serif;
  font-family: 'Noto Serif', serif;
}


/* Stylings */

html {
  font-size: 62.5%;
}

.body-image {
  display: none;
}

h3,
button,
a {
  font-size: 1rem;
}

h2 {
  /* display: flex;
    flex-direction: column;
    justify-content: center; */
  font-size: 400%;
  margin-top: -25%;
  z-index: 5;
}

body {
  color: rgb(247, 240, 240);
  background: #8ad3b8;
  /* margin: 100px 250px; */
  height: 100%;
  width: 99%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.main {
  text-align: center;
  /* align-content: center; */
  margin: 4% auto;
  width: 57%;
  height: 65%;
  background: rgba(12, 134, 85, 1);
  border-radius: 20px;
  border: 10px solid rgba(12, 134, 85, .4);
  box-shadow: 0 0 50px rgba(12, 134, 85, 1);
  min-height: 450px;
}

h1 {
  margin: 0;
  padding: 20px 0 0 0;
  font-size: 500%;
}

h3,
section,
.start-timer {
  margin: 0;
  padding: 10px;
  display: inline-block;
  border-radius: 20px;
}

h6 {
  margin: 0;
  padding: 0 0 20px 0;
  font-size: 10px;
}

header,
section {
  margin: 0px;
}

section section {
  padding: 10px;
}

button {
  background: #fe483b;
  /* border-radius: 10px; */
  border: 2px solid #fe483b;
}

.start-timer-section {
  /* margin: 140px 0 0 0; */
  outline: none;
  display: flex;
  flex-direction: column;
  margin-top: 15%;
  position: relative;
}


/* List */

.dropdown-list,
li,
a {
  display: inline-block;
  margin: 10px 15px 10px 10px;
  color: black;
  text-decoration: none;
  background: #8ad3b8;
  border-radius: 5px;
  outline: none;
}

.dropdown-list,
li {
  border-radius: 40px;
}

a {
  /* display: block; height: 100%; width:100%; */
  text-decoration: none;
  border-radius: 5px;
  color: black;
  font-size: 12px;
}

.dropdown-list a:hover {
  background: #fe483b;
}


/* .legs{
    margin: 10px 30px 0 15px;
    padding: 0 20px 0 0;
} */


/* ---THE CARD--- */

.cardDeck {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: none;
  box-shadow: 0 0 20px rgba(250, 241, 241, 0.6);
  margin: 0 0 15px 0;
}

.card-directions {
  border: 2px solid purple;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  min-width: 35%;
}

.card-picture {
  border: 2px solid yellow;
  visibility: none;
  min-width: 35%;
}

.button-timer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  border: 2px solid pink;
  /* min-height: 150px; */
  min-width: 15%;
  flex-wrap: wrap;
}

h3 {
  font-size: 15px;
}


/* ---TIMER ANIMATION--- */

body {
  padding: 20px;
}


/* div.circle-ani {
    transition: 4s ease;
    position: relative;
    width: 0px;
    height: 0px;
    text-align: center;
    background: hsl(4, 99%, 61%, .7);
    color: white;
    border-radius: 100%;
    padding: 40px;
    overflow: hidden;
    margin-bottom: -35%;
}

.animate {
    transform: scale(1.9);
    -webkit-transform: scale(1.9);
    -ms-transform: scale(1.9);
}  */

.circle-ani {
  position: relative;
  width: 0px;
  height: 0px;
  text-align: center;
  background: hsl(4, 99%, 61%, .7);
  color: white;
  border-radius: 100%;
  padding: 40px;
  overflow: hidden;
  margin-bottom: -35%;
}

div.animate {
  /* animation properties */
  animation-name: my-animation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: 10;
  animation-timing-function: ease-in-out;
  /* other properties */
  /* position: relative;
    width: 0px;
    height: 0px;
    text-align: center;
    background: hsl(4, 99%, 61%, .7);
    color: white;
    border-radius: 100%;
    padding: 40px;
    overflow: hidden;
    margin-bottom: -35%; */
}

@keyframes my-animation {
  from {
    background-color: hsl(4, 99%, 61%, .7);
    padding: 40px;
  }
  to {
    padding: 80px;
  }
}


/* ---Accessibility--- */

@media screen and (max-width: 1111px) {
  body {
    /* background: red; */
  }
  main {
    width: 100%;
  }
  h1 {
    padding: none;
    margin: -7% 0 0 0;
  }
  h6 {
    display: none;
  }
  .body-image {
    padding: -10px;
  }
  .cardDeck {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: none;
    margin: 0 0 15px 0;
  }
  .card-directions {
    min-height: auto;
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .card-picture {
    display: flex;
    flex-direction: row;
    width: 43%;
    visibility: none;
    /* min-height: 150px;
         min-width: 150px; */
  }
  .button-timer {
    display: flex;
    flex-direction: row;
    width: 43%;
    min-height: 50px;
    min-width: 150px;
  }
  .start-timer {
    margin: auto;
    outline: none;
  }
  /* .dropdown-list, li, a{
        display: none;
    } */
  /* // --- DROPDOWN MENU--- //     */
  .body-image {
    display: flex;
    max-height: 30%;
    max-width: 30%;
    margin: 0;
    padding: 0;
    z-index: 5;
    background: rgba(12, 134, 85, 1);
  }
  a {
    cursor: pointer;
  }
  .dropdown {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
  .dropdown li {
    letter-spacing: .5px;
    display: flex;
    justify-content: center;
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-list {
    display: none;
    position: absolute;
    min-width: 150px;
    box-shadow: 0px 10px 16px 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    margin: 0;
    margin-top: -35%;
    padding: 0;
  }
  /* Links inside the dropdown */
  .dropdown-list li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0;
  }
  /* Change color of dropdown links on hover */
  .dropdown-list a:hover {
    background-color: #fe483b
  }
  .show {
    display: block;
  }
}

@media screen and (max-width: 911px) {
  body {
    /* background: purple; */
  }
  .card-picture,
  .button-timer {
    width: 40%;
  }
}

@media screen and (max-width: 679px) {
  body {
    /* background: orange; */
  }
  .card-picture,
  .button-timer {
    width: 39%;
  }
  h1 {
    font-size: 300%;
    padding: 0;
  }
}

@media screen and (max-width: 649px) {
  body {
    /* background: yellow; */
  }
  .card-picture,
  .button-timer {
    width: 36%;
  }
  body {
    margin: 0;
  }
}

@media screen and (max-width: 619px) {
  body {
    /* background: pink; */
  }
  html {
    height: 60%;
    margin: 0;
  }
  .card-picture,
  .button-timer {
    width: 20%;
    height: 200px;
    flex-direction: column;
  }
  .main {
    width: 100%;
    height: 150%;
    min-height: none;
    margin-left: 5px;
  }
  .dropdown-list {
    margin: -40% 0 20% 0;
  }
}

@media screen and (max-width: 430px) {
  .main {
    height: 155%;
  }
  .dropdown-list {
    margin-top: -100%;
    margin-bottom: 50%;
    width: 40%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch a Stretch</title>

  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  <link href="https://fonts.googleapis.com/css2?family=Gentium Book Plus&family=Noto Serif&display=swap" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>
  <main >

    <header>
      <!-- <img id = "menu" onclick = "dropdownFunction()"  src="body.ico" alt ="body" > -->
      <a onclick="myFunction()" title="Body Parts" ><img id="menu"  src="body.ico"> </a>
      <h1>Fetch a Stretch</h1>
    </header>
    <section>
      <h6>Welcome to moving better!</h6>
      <section >
        <section >
          <h3>Stretch: Lorem ipsum dolor sit.</h3>
          <h3>Explanation: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, autem? Iusto itaque quae perspiciatis illo nostrum aspernatur voluptatum, libero sit provident accusantium explicabo est harum omnis quod? Amet, maiores inventore.</h3>
        </section>
        <section >
          <h3>Picture:</h3>
        </section>
        <section >
          <div id="circle" ></div>
          <h2 id="sec">30</h2>
          <div >
            <button onclick="start()" id='start' >Start Timer</button>
          </div>
        </section>
      </section>

      <span id="dropdownClick" >
                        <ul id = "myDropdown" >
                            <li ><a href="#">Neck</a></li>
                            <li ><a href="#">Shoulders</a></li>
                            <li ><a href="#">Hands</a></li>
                            <li ><a href="#">Low Back</a></li>
                            <li ><a href="#">Hips</a></li>
                            <li ><a href="#">Legs</a></li>
                        </ul>
                </span>
    </section>


  </main>

  <script type="text/javascript" src="main.js"></script>

</body>

</html>

Provided that doesn't work as intended, here is the codepen for it (I hope that's okay, I'm still new to most of this) https://codepen.io/lgmunyon/pen/dymNbjQ

CodePudding user response：

You have to accommodate for the circle's size - the parent div has to grow to contain the child div (the circle) the way you have them currently positioned. If you position the parent div - the card the circle is in - to be position: relative and the circle to be position: absolute you can then define exactly where the circle will sit within the card, and it will not stretch the card out.

In regards to the timer button, it has the flex property and is matching the width changes of the circle. You can remove the flex property to fix that alone, but if you use the positional changes that problem resolves itself.

section.button-timer {
  position: relative;
}

div.circle-ani {
  position: absolute;
  top: 50px; /* An example of where to position the circle */

CodePudding user response：

The animation itself is problematic. You are specifying:

  @keyframes my-animation {
    from {
      background-color: hsl(4, 99%, 61%, .7);
      padding: 40px;
    }
    to {
      padding: 80px;
    }
  }

When the padding jumps the style you have set of padding: 40px; to padding: 80px; it will change the padding of the element, hence, adding more height. Remove this padding to solve your issue.

Side note: Using margin: -%; is not an efficient way to position elements. It will be very unresponsive if you do this. I added display: flex; to .circle-ani to fix the positioning of h2#sec.

//---TIMER---//
var remainingTime = 30;
var isStopped = true;

const countContainer = document.getElementById('sec');
const renderTime = () => {
  remainingTime -= 1;
  countContainer.innerHTML = remainingTime;
  if (remainingTime === 0) {
    isStopped = true;
    clearInterval(timer);
    remainingTime = 30;
  }
}

const startTimer = () => {
  if (isStopped) {
    isStopped = false;
    countContainer.innerHTML = remainingTime;
    timer = setInterval(renderTime, 1000);

  }
}

document.getElementById('start').addEventListener('click', function() {
  document.getElementById('circle').classList.add('animate');
});

const startButton = document.getElementById('start');

startButton.onclick = startTimer;

// const stopTimer = () => {
//     isStopped = true;
//     if (timer) {
//         clearInterval(timer);
//     }
// }

// const resetTimer = () => {
//     isStopped = true;
//     clearInterval(timer);
//     clearInterval(animate);
//     remainingTime = 30;
//     countContainer.innerHTML = remainingTime; 

// }







//---CARD DECK---//
mobiscroll.settings = {
  theme: 'ios',
  themeVariant: 'light'
};
mobiscroll.listview('.cardDeck', {
  stages: [{
    percent: -20,
    action: function(event, inst) {
      inst.move(event.target, 0);
      return false;
    }
  }, {
    percent: 20,
    action: function(event, inst) {
      inst.move(event.target, 0);
      return false;
    }
  }],
  actionable: false
});


// ---BODY ICON ---//
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.body-image')) {
    var dropdowns = document.getElementsByClassName("dropdown-list");
    showEvent = 'show';
    for (var i = 0; i < dropdowns.length; i  ) {
      var currentElement = dropdowns[i],
        currentElementAsString = dropdowns[i].toString();
      if (currentElementAsString.localeCompare(showEvent)) {
        currentElement.classList.remove('show');
      }
    }
  }
}

body {
  font-family: 'Gentium Book Plus', serif;
  font-family: 'Noto Serif', serif;
}


/* Stylings */

html {
  font-size: 62.5%;
}

.body-image {
  display: none;
}

h3,
button,
a {
  font-size: 1rem;
}

h2 {
  /* display: flex;
    flex-direction: column;
    justify-content: center; */
  font-size: 400%;
  line-height: 1;
  margin: 0;
  z-index: 5;
}

body {
  color: rgb(247, 240, 240);
  background: #8ad3b8;
  /* margin: 100px 250px; */
  height: 100%;
  width: 99%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.main {
  text-align: center;
  /* align-content: center; */
  margin: 4% auto;
  width: 57%;
  height: 65%;
  background: rgba(12, 134, 85, 1);
  border-radius: 20px;
  border: 10px solid rgba(12, 134, 85, .4);
  box-shadow: 0 0 50px rgba(12, 134, 85, 1);
  min-height: 450px;
}

h1 {
  margin: 0;
  padding: 20px 0 0 0;
  font-size: 500%;
}

h3,
section,
.start-timer {
  margin: 0;
  padding: 10px;
  display: inline-block;
  border-radius: 20px;
}

h6 {
  margin: 0;
  padding: 0 0 20px 0;
  font-size: 10px;
}

header,
section {
  margin: 0px;
}

section section {
  padding: 10px;
}

button {
  background: #fe483b;
  /* border-radius: 10px; */
  border: 2px solid #fe483b;
}

.start-timer-section {
  /* margin: 140px 0 0 0; */
  outline: none;
  display: flex;
  flex-direction: column;
  margin-top: 15%;
  position: relative;
}


/* List */

.dropdown-list,
li,
a {
  display: inline-block;
  margin: 10px 15px 10px 10px;
  color: black;
  text-decoration: none;
  background: #8ad3b8;
  border-radius: 5px;
  outline: none;
}

.dropdown-list,
li {
  border-radius: 40px;
}

a {
  /* display: block; height: 100%; width:100%; */
  text-decoration: none;
  border-radius: 5px;
  color: black;
  font-size: 12px;
}

.dropdown-list a:hover {
  background: #fe483b;
}


/* .legs{
    margin: 10px 30px 0 15px;
    padding: 0 20px 0 0;
} */


/* ---THE CARD--- */

.cardDeck {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: none;
  box-shadow: 0 0 20px rgba(250, 241, 241, 0.6);
  margin: 0 0 15px 0;
}

.card-directions {
  border: 2px solid purple;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  min-width: 35%;
}

.card-picture {
  border: 2px solid yellow;
  visibility: none;
  min-width: 35%;
}

.button-timer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  border: 2px solid pink;
  /* min-height: 150px; */
  min-width: 15%;
  flex-wrap: wrap;
}

h3 {
  font-size: 15px;
}


/* ---TIMER ANIMATION--- */

body {
  padding: 20px;
}


/* div.circle-ani {
    transition: 4s ease;
    position: relative;
    width: 0px;
    height: 0px;
    text-align: center;
    background: hsl(4, 99%, 61%, .7);
    color: white;
    border-radius: 100%;
    padding: 40px;
    overflow: hidden;
    margin-bottom: -35%;
}

.animate {
    transform: scale(1.9);
    -webkit-transform: scale(1.9);
    -ms-transform: scale(1.9);
}  */

.circle-ani {
  position: relative;
  width: 0px;
  height: 0px;
  text-align: center;
  background: hsl(4, 99%, 61%, .7);
  color: white;
  border-radius: 100%;
  padding: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.animate {
  /* animation properties */
  animation-name: my-animation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: 10;
  animation-timing-function: ease-in-out;
  /* other properties */
  /* position: relative;
    width: 0px;
    height: 0px;
    text-align: center;
    background: hsl(4, 99%, 61%, .7);
    color: white;
    border-radius: 100%;
    padding: 40px;
    overflow: hidden;
    margin-bottom: -35%; */
}

@keyframes my-animation {
  from {
    background-color: hsl(4, 99%, 61%, .7);
  }
  to {
    padding;
    0;
  }
}


/* ---Accessibility--- */

@media screen and (max-width: 1111px) {
  body {
    /* background: red; */
  }
  main {
    width: 100%;
  }
  h1 {
    padding: none;
    margin: -7% 0 0 0;
  }
  h6 {
    display: none;
  }
  .body-image {
    padding: -10px;
  }
  .cardDeck {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: none;
    margin: 0 0 15px 0;
  }
  .card-directions {
    min-height: auto;
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .card-picture {
    display: flex;
    flex-direction: row;
    width: 43%;
    visibility: none;
    /* min-height: 150px;
         min-width: 150px; */
  }
  .button-timer {
    display: flex;
    flex-direction: row;
    width: 43%;
    min-height: 50px;
    min-width: 150px;
  }
  .start-timer {
    margin: auto;
    outline: none;
  }
  /* .dropdown-list, li, a{
        display: none;
    } */
  /* // --- DROPDOWN MENU--- //     */
  .body-image {
    display: flex;
    max-height: 30%;
    max-width: 30%;
    margin: 0;
    padding: 0;
    z-index: 5;
    background: rgba(12, 134, 85, 1);
  }
  a {
    cursor: pointer;
  }
  .dropdown {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
  .dropdown li {
    letter-spacing: .5px;
    display: flex;
    justify-content: center;
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-list {
    display: none;
    position: absolute;
    min-width: 150px;
    box-shadow: 0px 10px 16px 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    margin: 0;
    margin-top: -35%;
    padding: 0;
  }
  /* Links inside the dropdown */
  .dropdown-list li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0;
  }
  /* Change color of dropdown links on hover */
  .dropdown-list a:hover {
    background-color: #fe483b
  }
  .show {
    display: block;
  }
}

@media screen and (max-width: 911px) {
  body {
    /* background: purple; */
  }
  .card-picture,
  .button-timer {
    width: 40%;
  }
}

@media screen and (max-width: 679px) {
  body {
    /* background: orange; */
  }
  .card-picture,
  .button-timer {
    width: 39%;
  }
  h1 {
    font-size: 300%;
    padding: 0;
  }
}

@media screen and (max-width: 649px) {
  body {
    /* background: yellow; */
  }
  .card-picture,
  .button-timer {
    width: 36%;
  }
  body {
    margin: 0;
  }
}

@media screen and (max-width: 619px) {
  body {
    /* background: pink; */
  }
  html {
    height: 60%;
    margin: 0;
  }
  .card-picture,
  .button-timer {
    width: 20%;
    height: 200px;
    flex-direction: column;
  }
  .main {
    width: 100%;
    height: 150%;
    min-height: none;
    margin-left: 5px;
  }
  .dropdown-list {
    margin: -40% 0 20% 0;
  }
}

@media screen and (max-width: 430px) {
  .main {
    height: 155%;
  }
  .dropdown-list {
    margin-top: -100%;
    margin-bottom: 50%;
    width: 40%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch a Stretch</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  <link href="https://fonts.googleapis.com/css2?family=Gentium Book Plus&family=Noto Serif&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <main >
    <header>
      <!-- <img id = "menu" onclick = "dropdownFunction()"  src="body.ico" alt ="body" > -->
      <a onclick="myFunction()" title="Body Parts" ><img id="menu"  src="body.ico"> </a>
      <h1>Fetch a Stretch</h1>
    </header>
    <section>
      <h6>Welcome to moving better!</h6>
      <section >
        <section >
          <h3>Stretch: Lorem ipsum dolor sit.</h3>
          <h3>Explanation: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, autem? Iusto itaque quae perspiciatis illo nostrum aspernatur voluptatum, libero sit provident accusantium explicabo est harum omnis quod? Amet, maiores inventore.</h3>
        </section>
        <section >
          <h3>Picture:</h3>
        </section>
        <section >
          <div id="circle" >
            <h2 id="sec">30</h2>
          </div>
          <div >
            <button onclick="start()" id='start' >Start Timer</button>
          </div>
        </section>
      </section>
      <span id="dropdownClick" >
        <ul id = "myDropdown" >
            <li ><a href="#">Neck</a></li>
            <li ><a href="#">Shoulders</a></li>
            <li ><a href="#">Hands</a></li>
            <li ><a href="#">Low Back</a></li>
            <li ><a href="#">Hips</a></li>
            <li ><a href="#">Legs</a></li>
        </ul>
       </span>
    </section>
  </main>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>