Today’s Goals:

• Continue creating CSS media queries to make a responsive webpage

 Today’s Featured Site:

• http://shoulddesignersco.de/– DJ Khaled has lots of questions for designers! Make sure to view the code. Also, this is a great domain name. Notice what happens to the grid of items when you shrink the browser.

 CSS Media Query Practice

New today: We are going to change up our original DJ Khaled page by adding a header, footer, and sidebar menu. We are going to add new CSS for different media queries to change how our page looks on different screen sizes.

Add some new media queries

1. Open up khaled1.html from Wednesday in Notepad++
2. Create the following media queries by changing the code you already have:
   • 320 pixels, width: 100%, background-color: pink
   • 600 pixels, width: 50%, background-color: yellow
   • 1100 pixels, width: 25%, background-color: orange

Add some new CSS

1. Copy the following code from #1 here.
2. Paste the code below .box in your style sheet in your head section (after .box and above your media queries).

Change your HTML

1. Copy the following code from #2 here.
2. Paste the code OVER all of the boxes in your HTML (get rid of all div class=”box” and replace it with the new HTML).
3. Then copy and paste the new HTML 3 times so you once again have just 4 boxes. Each box has a header, menu, image, text, and footer.

Code check

• If you’re having issues, copy and paste the entire code from #3 here or here.

Create new CSS for each media query

1. Let’s look at the page in Firefox with Responsive Design Mode and see what happens at our different break points of 320px, 600px, and 1100px. Does this page look good at each size? Why or why not?
2. What do we have to change for each media query? Why?
3. Let’s begin with the smallest screen, 320px. Let’s change nav, li, and section for this media query. Our nav should have width: 100%;, background-color: purple; box-sizing: border-box; float: none; and clear: right;. Our li should have display: inline; (why?). Our section should have width: 100%; background-color: pink; and float: none;. Why are we changing the CSS in this way?
4. Now let’s change the rest of our CSS. As our screen size grows, we can have our menu (nav) move from the top of our page to a sidebar. Let’s begin with the next screen, 600px. Our nav should have background-color: yellow; and width: 35%; (why?). If we want our nav to appear in a sidebar on the left, how should we float it? Let’s add background-color: blue; to section and width: 55%;. How should we float section if we want it next to nav? Finally, we need our Major Keys to display vertically, not horizontally. What should we change the display of li to?
5. Time to finish with the 1100px media query. Let’s change the background color of nav to green and the width to 40%. Let’s change the background color of section to pink and the width to 50%. Why don’t we have to float these sections? Why don’t we have to do anything with li?
6. Finally, let’s look at this updated page in Firefox’s Responsive Design Mode.
7. Why did we keep our header and footer the same for each screen size?
8. Look at what happens to our webpage when we go below 320px. How could we fix this?