Assessment wanted for responsive web design and media queries skill test

MDN Learn
,
#1

Hello,

I have included a link to my css on Glitch.

I was a bit confused about the best way to set the rules to cover phones and tablets in portrait and landscape modes, as well as desktops.

I did the following:

For tablets in portrait mode
@media screen and (min-width: 600px) and (orientation: portrait) { ... }

For devices in landscape mode (with a min width of 600px
@media screen and (min-width: 600px) and (orientation: landscape) { ... }

Thanks for your help

#2

Hi @ljh and welcome to the community :wave:

Great work on this exercise! :medal_sports:

For a “normal” website like this I wouldn’t even bother using distinct layouts for portrait and landscape. The important thing is to find a good layout for the width. The orientation in your media query differentiates based on specific heights which feels unnecessary. (That’s what scrolling is for :stuck_out_tongue_winking_eye:)

Therefore I would say your landscape layout is fine for 600px+ widths (no matter the orientation). If you like to make the cards layout more “intelligent”, you could use something like this: grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
This code would make sure that the cards always have the same size, but at least 300px. Whenever there is enough space another card will join the same row.

I hope that helps. Feel free to ask questions. :slightly_smiling_face:

Have a nice day,
Michael

1 Like