HTML CSS Assessment

This is literally my first time ever using CSS and I am honestly just feeling a little overwhelmed.

… lays out the labels and form elements as full width when the screen is less than 600px wide

Does this mean they want my text boxes to span the box when its max-width: 599px?
and how do I span a label? i mean its like 5 letters long, so does this just mean they need to be laid out to where the label is on top of the input instead of on the left side of it?

Any help would be so appreciated. Thanks.

I think i actually just figured this out possibly, sort of? I think I’m on my way anyway, could someone just look at this and tell me if I’m on the right track?

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

form {
    display: inline!important;
    position: relative;
    width: 100%;
}

label {
    display: block;
    min-width: 100%;
}

input {
    display: block;
    min-width: 100%;
}

}

Welcome to the community! It looks like you’re moving in the right direction trying to figure out how to implement the CSS. You are correct that this can be tackled by using the max-width property.

Check out this resource to look more into max-width - you can assign different values to this property such as percentages, pixels, etc. If you click on the orange “Play It” buttons, you can experiment with different values and see the results.

1 Like

Sorry I didn’t reply. Thank you for your help!

1 Like