How to make unordered list responsive on mobile view?-CodePudding

I want the links email, LinkedIn and GitHub to be responsive by having it directly at the bottom of the title let's connect when in mobile view. Also I would like the margin top of 200px to be none when in mobile view. Apologies for the newbie question.

@media only screen and (max-width: 1200px) {
  footer.content-container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.footer {
  grid-area: footer;
  margin-top: 38px;
  margin-left: 10%;
  margin-right: 10%;
  height: 700px;
  margin-bottom: 100px;
}

.footer-text {
  padding: 200px 100px;
  font-family: "Khula", sans-serif;
  font-weight: 600;
  font-size: 80px;
  color: #bbbbbb;
  line-height: 80px;
  letter-spacing: -1px;
  display: inline-block;
}

.footer-contact {
  font-family: "Khula", sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: #222222;
  line-height: 50px;
  letter-spacing: -1px;
  text-decoration: none;
  padding-top: 0px;
  margin-left: 60px;
  margin-right: 60px;
}

.footer-text-color {
  color: #222222;
}

ul {
  list-style-type: none;
  text-decoration: none;
  margin-top: 200px;
  float: right;
}

<footer >

  <div >Let's <br> <span >Connect</span></div>

  <ul>

    <li><a href=about.html >Email</a></li>
    <li><a href=projects.html >LinkedIn</a></li>
    <li><a href=contact.html >GitHub</a></li>
  </ul>

</footer>

CodePudding user response：

add this to your css:

@media only screen and (max-width: 845px) {
  .footer-text {
    padding-bottom: 0;
  }
  ul {
    margin-top: 0;
    float: unset;
  }
}

<!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>Document</title>
    <style>
      @media only screen and (max-width: 1200px) {
        footer.content-container {
          margin-left: 10px;
          margin-right: 10px;
        }
      }

      .footer {
        grid-area: footer;
        margin-top: 38px;
        margin-left: 10%;
        margin-right: 10%;
        height: 700px;
        margin-bottom: 100px;
      }

      .footer-text {
        padding: 200px 100px;
        font-family: "Khula", sans-serif;
        font-weight: 600;
        font-size: 80px;
        color: #bbbbbb;
        line-height: 80px;
        letter-spacing: -1px;
        display: inline-block;
      }

      .footer-contact {
        font-family: "Khula", sans-serif;
        font-weight: 600;
        font-size: 35px;
        color: #222222;
        line-height: 50px;
        letter-spacing: -1px;
        text-decoration: none;
        padding-top: 0px;
        margin-left: 60px;
        margin-right: 60px;
      }

      .footer-text-color {
        color: #222222;
      }

      ul {
        list-style-type: none;
        text-decoration: none;
        margin-top: 200px;
        float: right;
      }

      @media only screen and (max-width: 845px) {
        .footer-text {
          padding-bottom: 0;
        }
        ul {
          margin-top: 0;
          float: unset;
        }
      }
    </style>
  </head>
  <body>
    <footer >
      <div >
        Let's <br />
        <span >Connect</span>
      </div>

      <ul>
        <li><a href="about.html" >Email</a></li>
        <li><a href="projects.html" >LinkedIn</a></li>
        <li><a href="contact.html" >GitHub</a></li>
      </ul>
    </footer>
  </body>
</html>