Please take a look at my answer (on JSFiddle) for “Test your skills: Media Queries and Responsive Design.”
I realized my answer has several noticeable differences from the official answer when I looked at it.
-
I added
max-width
andmargin
to the body. This isn’t suggested in the task but I don’t like the entire web page to flex infinitely wider. I’ve seen the CSS for the Mozilla splash page assessment doing the same thing. -
I set the cards to grid layout outside of the media queries, as suggested in the tutorial page.
-
The cards auto-fill the article box so it can be 1 to 3 columns. An individual card has minimum width of 15em.
-
I set the navbar to become flex layout in much narrower view than the the side bar going to the side.
-
When the side bar goes to the side, it has fixed width of 15em.
-
Do I need to set
header li
's margin to 0? I inspected the navbar in mobile resolution with the developer tool of Edge (Chromium version) but it doesn’t seem to have any margin.
Is there any weakness in my solution compared to the official answer?