HTML/CSS Assessment Question on CSS grid layout

Learning Challenge

HTML/CSS Assessment formatting section with conditional perimeters on browser size i.e. greater than or less than 600 px

Question

I want to make sure that the form we need to create for the HTML/CSS Assessment is in a “grid layout” when the form is bigger than 600 px. I’ve included what my form looks like when it is fully maximized. Is that considered a “grid layout” and if so, does the pic below it look right when it is below 600px (it’s supposed to just be full width when the screen is below 600px?

Sorry for asking so many questions! I’m pretty green so I want to make sure I’m understanding this stuff correctly.

What I’ve tried

The Assessment wants you to put the form in a grid layout if the form is bigger than 600px. I used the following input to gain a grid layout when above 600px.

@media screen and (min-width: 600px) {

form {

    width: 600px;

}

.grid-container {

    display: grid;

}

}

I’ll also include a screen shot of the code in Visual Studio Code.

For the second part I used the following code to achieve the form at full width when below 600px.

@media screen and (max-width: 600px) {

form {

    width: auto;

}

}

Screenshots

1 Like

At a glance, this look good, @FullStackJunkie! :clap:

1 Like