'Why my grid template is not responsive as should be?? I've tried using media queries method, watching youtube vids, added meta, no changes

Below is the HTML and CSS code that I am trying to make a responsive website with. Media queries have been used to make it responsive but not working even though I've been attempting with grid-template-columns with any values or even changed the width and height. <Meta> tags also added...

.container {
  background-color: beige;
  width: 100%;
  height: 33vh;
}

nav {
  font-size: larger;
  padding: 20px;
  width: 100%;
  height: 10px;
  line-height: 70px;
  box-sizing: border-box;
  position: absolute;
}

nav ul {
  float: right;
  list-style-type: none;
  border: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: brown;
  text-align: center;
  padding: 30px;
  font-weight: bold;
  font-size: 16px;
}

nav ul li a:hover {
  background-color: burlywood;
}

nav ul li a:active {
  background-color: rgb(233, 209, 179);
}

body {
  margin: 0;
  background-color: cyan;
}

@media screen and (min-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, 1fr);
  }
}

.grid-container {
  text-align: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-size: 30px;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
  grid-template-rows: 150px 120px 120px 120px 130px;
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  grid-template-areas: 'Header Header Header Header Header Header Header' 'Left Section Section Section Section Aside Aside' 'Left Section Section Section Section Aside Aside' 'Left Section Section Section Section Aside Aside' 'Left Footer Footer Footer Footer Aside Aside';
}

.grid-container div {
  padding: 20px 0;
  border: 1px solid black;
  background-color: aquamarine;
}

.header {
  text-decoration: underline;
  grid-column-start: 1;
  grid-column-end: 8;
}

.left {
  text-decoration: underline;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 6;
}

.left a {
  display: block;
  text-align: center;
  padding: 15px;
  transition: all 1s ease;
  color: black;
  font-size: 31.5px;
}

.left a:hover {
  background-color: grey;
}

.left a:active {
  background-color: rgb(95, 95, 95);
}

.section {
  text-decoration: underline;
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 5;
}

.aside {
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 6;
}

.aside a {
  display: block;
  text-align: center;
  padding: 15px;
}

.footer {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 5;
  grid-row-end: 6;
}
<!DOCTYPE html>
<html>

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

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://kit.fontawesome.com/85bcd95ec5.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>

<body>
  <div class="container">
    <nav>
      <ul>
        <li><a href="Responsive.html">Home</a></li>
        <li><a href="Width.html">Width</a></li>
        <li><a href="Max-width.html">Max-width</a></li>
        <li><a href="Images.html">Images</a></li>
        <li><a href="Text.html">Text</a></li>
      </ul>
    </nav>
    <i class="fas fa-code" style="font-size: 60px; left: 80px; top: 50px; position: absolute;"></i>
    <i class="fas fa-coffee" style="font-size: 150px; left: 30px; top: 20px; position: absolute; opacity: 0.7;"></i>
  </div>

  <div class="grid-container">
    <div class="header">Welcome!!!
      <br>
      <p style="font-size: 20px; font-family: 'Times New Roman', Times, serif; font-style: italic;">
        This is the <strong style="font-weight: bolder; color: red;">Header</strong> or
        <strong style="font-weight: bolder; color: red;">Title</strong> of the Grid Template.
      </p>
    </div>
    <div class="left">Menu
      <a href="#"><i class="fa-solid fa-house fa-2x"></i></a>
      <a href="#"><i class="fa-brands fa-facebook-square fa-2x"></i></a>
      <a href="#"><i class="fa-brands fa-instagram-square fa-2x"></i></a>
      <a href="#"><i class="fa-brands fa-twitter-square fa-2x"></i></a>
      <a href="#"><i class="fa-brands fa-weibo fa-2x"></i></a>
    </div>
    <div class="section">Content
      <br>
      <p style="font-size: 30px; font-family: 'Times New Roman', Times, serif; font-style: italic; color: blue;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum provident quos animi magnam ipsa autem suscipit praesentium optio fugiat, minus recusandae architecto! Rerum voluptate ab et incidunt nulla similique amet!
      </p>
    </div>
    <div class="aside">
      <a href="#"><i class="fa-brands fa-html5" style="font-size: 140px; color: rgb(255, 102, 0);"></i></a>
      <a href="#"><i class="fa-brands fa-css3-alt"  style="font-size: 140px; color: blue;"></i></a>
      <a href="#"><i class="fa-brands fa-js-square" style="font-size: 140px; color: yellow;"></i></a>
    </div>
    <div class="footer">Comment:
      <br>
      <textarea name="comment" id="comment" placeholder="Type..." cols="50px" rows="4px">
          </textarea>
    </div>
  </div>
</body>

</html>

So far I think the rest should be fine

htmlcssgridmedia-queries


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions