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?
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
column. Without flexbox or CSS grid we change our inline links and menus to
display:block; so they stack vertically.
nav needs at least
27vw to not break the links into two lines.
Could the videos width be not allowing the grid to collapse? The width is hard coded.