How can I close an <details> when the screen is smaller than x? I think it could be done using css @media but I am not sure how.

Answer 1

Create 2 similar details blocks, one with open attribute, and the other without.

Use @media to select the display block and none.

.details-open {
display: block;
}

.details-closed {
display: none;
}

@media only screen and (max-width: 600px) {
.details-open {
display: none;
}
.details-closed {
display: block;
}
}

https://code.sololearn.com/WCtY2i9Q1Rud/?ref=app

Answer 2

Lisa Check this out, notice the change while I drag the screen.
https://www.loom.com/embed/4d7744536e1a486e8af7935058cf39ca

Answer 3

Calviղ Cool! Thanks! 👍

Answer 4

"open" is rather an attribute of details, a functionality, not a style property

I don't know how to set it with css...

https://www.w3schools.com/TAGS/tag_details.asp

Answer 5

Would changing the display render the details completely invisible instead of just closing g them?