CSS Grid Responsive being none responsive-CodePudding

I am following a tutorial on CSS grid Youtube CSS Tutorial. I have ran into an issue where by my code is not performing as that of the tutorial even though they are similar. I was coding in vscode, then I moved to codepen since it's the same environment that is used in the tutorial. Unfortunately, my page remains unresponsive.


<body>
  
       <div >
        <nav>Navbar</nav>
        <main>
            Main
        </main>
        <div id="sidebar">Sidebar</div>
        <div id="content1">Content1</div>
        <div id="content2">Content2</div>
        <div id="content3">Content3</div>
        <footer>Footer</footer>


    </div>
</body>

The CSS file is below.


.mainContainer{
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: .2fr 1.5fr 1.2fr .3fr;
    grid-template-areas:
    'nav nav nav nav'
    'sidebar content1 content2 content3'
    'sidebar main main main'
    'footer footer footer footer';
    grid-gap: 0.2rem;
}

nav {
    background-color: #a7ffeb;
    grid-area: nav;
}

main {
    background-color: #84ffff;
    grid-area: main
}

#sidebar {
    background-color: #18ffff;
    grid-area: sidebar;
}

#content1 {
    background-color: #6fffd2;
    grid-area: content1;
}

#content2 {
    background-color: #6fffd2;
    grid-area: content2;
}

#content3 {
    background-color: #6fffd2;
    grid-area: content3;
}

footer{
     background-color: #1de961;
     grid-area:footer;
};

/*Responsive section of the page*/

@media only screen and (max-width : 550px) {
  .mainContainer {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 1.2fr 1.2fr 1.2fr 2.2fr 1fr;
    grid-template-areas:
      'nav'
      'sidebar'
  }
}

CodePudding user response：

You have wrong kind of comment in the css

//Responsive section of the page

Is wrong you should use

 /* */

Because of the wrong comments the responsive section of the code doesn't work. You're also missing a semicolon from here

main {
    background-color: #84ffff;
    grid-area: main <------
}

Hopefully this resolved your problem.

EDIT: Just copy paste the CSS that the YouTuber has provided in the CodePen and see what difference you have.

:root {
  --main-radius: 5px;
  --main-padding: 5px;
}

body {
  font-family: "Inter", sans-serif;
}

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas:
 "nav nav nav nav"
  "sidebar main main main"
  "sidebar content1 content2 content3"
  "sidebar footer footer footer";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;
}

nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

main {
  background: #84ffff;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#sidebar {
  background: #18ffff;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content3 {
  background: #73ffba;
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

footer {
  background: #1de9b6;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3"
      "footer";
  }
}