Responsive web design and media queries

MDN Learn
#1

Hi everybody!

Assessment wanted for “responsive web design and media queries skill test”.

Solving the task using a grid.

Solving the task using a flex and a grid.

Created with columns for cards.

A link to the actual task.

Many thanks to those who responded.

#2

Hi @petrushya

Nice work with all these variations. Great use of the auto-fill template. :heart_eyes:
I like the second one best where you use Flex for the header and grid for the cards. For me I feels the most like “The right tool for the right task”.

You can make the flex in the header even simpler:

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

header ul {
  display: flex;
}

Keep up the great work!
Have a nice weekend,
Michael

#3

Hi @mikoMK!

Thank you for your time over the weekend.

The remark is fair. I wanted to avoid line wrapping in the header. Therefore, there was confusion. Only then I remembered about  .

And one more question. How do I get IE-11 to recognize CSS for <main> without using flex, only via div with “role”? (The last solution.)

All the best.

#4

I think it’s enough to declare it as block element to be recognized:

main {
  display: block;
}
#5

Hi @mikoMK

Thanks a lot for the hint.

But the manual says:

However, Internet Explorer 11 and lower will otherwise not correctly expose the <main> element to screen readers such JAWS unless the element also has a role=“main” attribute.

With best wishes.

1 Like
#6

Ah, you’re right about the accessibility. I don’t think it’s possible to make the validator happy and make it work on IE.

I had another look at your solution, because I was wondering why you needed the &nbsp;. The reason is screen and (orientation: landscape). This makes the layout “jump back” to the wider version even on small screen (as long as the viewport is wider than it’s height). I think the best solution would be to just remove this condition.

See you,
Michael

#7

Hi @mikoMK

Of course, the navigation bar for very small devices should be organized differently, which, along with accessibility for different browsers, is not the purpose of this section. My untimely attempt to cover EVERYTHING AT ONCE… :flushed:

Good luck.

1 Like