Assessment wanted: Media Queries and Responsive Design

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.

  1. I added max-width and margin 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.

  2. I set the cards to grid layout outside of the media queries, as suggested in the tutorial page.

  3. The cards auto-fill the article box so it can be 1 to 3 columns. An individual card has minimum width of 15em.

  4. I set the navbar to become flex layout in much narrower view than the the side bar going to the side.

  5. When the side bar goes to the side, it has fixed width of 15em.

  6. 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?

Hi there @Junpei, and thanks for sending this code in.

This is really good, and I don’t think it has any notable weaknesses from the official answer. There are always multiple ways to solve any problem, and I think what you’ve done here is fine.

I like some your improvements, like the max-width setting.

1 Like

Hi Chris,

Thank you for taking your time to assess my code.
I really appreciate your kind words.