CSS Grid - rearrange for mobile view

HTML-CSS
1

Hey,

I’m currently on the 3rd project of responsive webdesign (product page) and tried my hand at CSS Grid.
Now I want to rearrange it a bit for mobile view. I want the middle (.two) and footer (.five) section to be fullscreen, like the header (.one) . But I can’t get rid of the two grid areas left and right.

Fullpage view: https://codepen.io/benthegerman/full/jjoKQr
editor view: https://codepen.io/benthegerman/pen/jjoKQr

I read that you usually build the mobile layout first and then rearrange it with a media query for min-width … px, so shouldnt it also work to do it the other way around and have it change with a max-width like in my code?

2

Not too good with grid yet, but somethings are display:flex which defaults to row. When the screen gets narrow why aren’t you changing the flex-direction to column. Without flexbox or CSS grid we change our inline links and menus to display:block; so they stack vertically.

nav needs at least27vw to not break the links into two lines.

Could the videos width be not allowing the grid to collapse? The width is hard coded.