- [Instructor] Looking at our page, it seems like 500 pixels might be about a good point to change it to a different layout. Going into my code, after the CSS, I'm gonna add a media query. I'm gonna start down on line 35. @media and then parentheses min-width colon 500 pixels. This is telling it that the style should apply when the view port is a minimum width of 500 pixels. I'm gonna add my brackets and then my first style is for container and the style I'm gonna add is grid template columns colon.
And I want three columns so I'm gonna do repeat and then in parentheses three coma one fr. So I'm repeating three columns, each will have a width of 1 fr. So save, and refresh. It sets up our three columns but since we set only one grid template area per row that's where the content is. To move the grid items into different locations with the grid template area, we just change which names are in each line. So my next style in the media query is gonna be applied to the container element also.
The grid template areas colon and then in quotation marks I want the header to fill up three cells in the grid, so I'm going to do header space, header space, header all in quotation marks. On the next line in quotatiion marks I want the content to fill up the first two cells going across so content space content space again but the last cell I want to be the related so, I'm gonna put related quotation mark again.
The next one content content again twice and then space and then adds to put that in the third cell. And then last line footer space, footer space, footer close the quotation marks and save. Go over here and refresh... Now you can see that everything fills in the spaces as I described. And this is inside a media query for 500 pixels, so if it's narrower it goes back to our first layout. Wider than 500 pixels....
Now we have a layout that's more appropriate for that screen size. I'll turn off the def tools quickly so you can see more what it looks like. Next looking at the layout it seems like 800 pixels would be a good point to change to a different layout for wider screens. So I'm gonna add another media query. In the code I'm gonna do this on line 45 at media, min width 800 pixels. And then container is what I'm gonna style and then I'm gonna do grid template columns repeat and then in parenthesis four comma one fr.
So, I'm gonna have four columns and then next grid template areas.... So now again I want the header to go across four cells in the first row so, I'm gonna type header four times separated by spaces inside the quotation marks. Next I'm gonna have the related section in the first column and the next two columns will be the content spanning two cells and then a space and then adds on the end.
And then the last one I want footer to take up all four columns again so, footer four times separated by spaces. And then save and refresh. So now when I go to wider than 800 pixels it will go to this new layout. So you can see I have the header at the top, the content in the middle, related links and ads on each side, and the footer on the bottom. All that was really basic and there's lot more we can do with sizes of the columns but that will at least get you started with how to approach layout.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox