media query question technical assessment

Question

I'm new here. Trying to pass this assessment in order to get into this program. I can't figure this part out for whatever reason. Underneath this is the task and code. I'm not sure if the code is correct. So if anyone could help me out I'll gladly appreciate it.

has a ‘form’ element that is 600px when the window is wider than 600px

@media screen and(min-width:599px) {
    form {
      display: grid;
      width:600px;
      margin: 0 auto;
      position: relative;
      grid-template-columns:600px;
    }
}

@media screen and (max-width:601px){
    form {
      display: grid;
      position: relative;
      grid-template-columns:600px;
      width:100%;
    }
}

Answer 1

Media query works like this:

form{

//some design untill the screen is 600px
}

    @media screen and (min-width:600px) {
        form {
//design when screen is 600px or less than 600px
          display: grid;
          width:600px;
          margin: 0 auto;
          position: relative;
          grid-template-columns:600px;
        }
    }

To see more code on media quarry, You can check my git:

link:https://github.com/RudeSoul/Leapfrog/blob/master/FinalDesign/Responsive/css/mediaq.css

To learn more on this visit:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css3_mediaqueries.asp