Assessment wanted for Responsive Web Design assessment - Bor770

Bor770 · December 20, 2020, 10:53am

Hi,

When solving the exercise here:

I tried to follow the recommendation to try to avoid media queries whenever possible

So, here is my solution:
https://codepen.io/bor770/project/editor/ARLOdY
I was very proud of myself for limiting the scope of the media query to the nav only, and having the main layout work correctly for both the narrow and the wide screen, using a flexbox for main.
Then I saw your solution:

github.com/mdn/css-examples

learn/tasks/rwd/marking.md

main

# Responsive Web Design Marking Guide

The aim of the tasks are to demonstrate an understanding of the properties covered in the [Beginners Guide to Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries) lesson in Learn Web Development on MDN.

This task not only asks the student to implement media queries correctly, they will also need to use the things they have learned about CSS Layout.

There is no one right answer however the following code demonstrates how simply the task can be achieved, and this is really what we are looking for as it is easy to complicate this task. Using modern layout methods of flexbox and grid means that we only need one media query.

```css
@media screen and (min-width: 60em) {
  header {
    display: flex; /* separate the nav and title */
    justify-content: space-between;
    align-items: center;
  }

  header ul {
    display: flex; /* mav navigation display using flexbox */
  }

This file has been truncated. show original

Here, you used a single media query, to rewrite the whole site.
So, on the one hand, your media query has a much wider scope than mine, but on the other hand, you had to write much less lines of CSS than me.
In general, what is the better approach? Should I try to minimize the size of the code, or the scope of the media queries?

justsomeone · December 20, 2020, 11:38am

Hello @Bor770

well done you doing great

reduce the size of code is good to reduce the amount of the bandwidth needed especially for large project but also the readability and clearity of the code is important

hope that help and have a nice day

Bor770 · December 20, 2020, 12:30pm

Thank you for your response!
I still don’t understand, why is it recommended to try to avoid using media queries if possible? What’s the advantage of having a flexbox, for example, instead of a media query?

justsomeone · December 20, 2020, 1:38pm

you very welcome

mobile device tend to lie about their width which many times it lead to unpredicted result

Bor770 · December 20, 2020, 1:59pm

So, if you had to choose between having a few line of CSS using a media query, or twice as much lines avoiding the media query, giving the same layout, which would you choose?

justsomeone · December 20, 2020, 2:22pm

first i want to clear one thing that i am student like you

for me i would use flex or grid

after you finish this course you will use already made component which would help you and will make your page responsive but of course learning it is good thing in case if you want to edit something or build custom component