Today’s goal:

• Continue practicing CSS media queries to create a responsively designed webpage

 Today’s featured website:

• https://www.epic.net/en/– Enjoy the animations on this webpage for a digital design agency

 CSS Media Queries

• CSS media queries are used to change CSS styles when the screen (or view port) is a certain width. Screen/view port sizes are selected by determining when a design “breaks.” For example, in the Dallas Art Fair site we looked at, a video was used as a background for larger view ports, such as computer screens, and an image was used for smaller view ports. Media queries can be used to change a background image, page layout, or menu design (among many other things) when these things don’t look right at certain view ports (such as a video background image on a small screen such as a phone).
• Let’s open the page in Firefox and go into Responsive Design Mode. Let’s check out the page just before it hits 500px and 900px. What happens? Why?
• Why does the box still float to the left when the screen size hits 900px and above?
• Let’s add some more media queries. What should happen if we design for a smaller screen? What about a larger one? Specifically, what width should the box be? Let’s add media queries for 320px and for 1100px.
• Can you add other CSS style properties to the separate media queries? Let’s try adding background colors to each media query.
• What would happen if we add more boxes to our page? Let’s try it.

 New Practice Code & New Media Queries

• What we are doing to our page: 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.
• Important new code:
  • Download practice code and start new page in Notepad++ (save as khaled2.html)
  • header– located at top of page, width 100% for each screen
  • footer– located at bottom of page, width 100% for each screen
  • nav– contains the Major Keys and is the page menu. Nav is 100% width on the smallest screen (320px) and is a horizontal menu across the top below the header and above the section. Nav then becomes a sidebar for the 600 and 1100 pixels screens, so its width changes to a smaller percentage and it is floated to the left so it will be next to section. The nav’s menu items go from being horizontally displayed to vertically displayed on the larger screens.
  • section– contains picture and text. Section is 100% width on the smallest screen (320px) and then floats to the right so the nav can fit next to it on the larger screens.
• Create new CSS for each media query. Work at your own pace and please help each other out!
  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? Hint: we need to use (min-width) and (max-width) with one of our media queries.