Assessment for Beginner's guide to media queries

MDN Learn
#1

I spent a few hours trying to figure out this task that looks simple but at some point confusing when your code don’t work according. I need some assessment to know if there’s anything I need to improve there. Plus I want to know how to which is better on on media query, using pixel screen size or em

#2

Hi @madefromjames

Great work on this challenging task. :tada:

You could use Flexbox on the header itself and remove padding from the ul. This would prevent the nav text from breaking the line when the viewport gets smaller and it would nicely align everything without the need for padding:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header ul{
  display: flex;
}

What is the reason for grid-auto-rows: minmax(200px, auto);? It doesn’t seems to make any difference if this prop is there or not.

I see mostly pixel values being used for media queries. I think when your code uses a lot of relative units like em and rem, it may also be a goo idea to use them on media queries.
In the end it’s all about testing. You can change the font size of your browser to see how your page looks. Normally, 1em equals 16px. When you set your browser’s font size to 32px then 1em equals 32px.

Have a nice day,
Michael

1 Like
#3

Thanks for the recommendation @mikoMK

1 Like