CSS Media Queries

Posted on by tchastkavich

Shape of the Day:

  • CSS Media Queries
  • CSS Grid Layout

Website of the Day:

https://photos.icons8.com/creator – Create stock photos with this website!

1. CSS Media Queries

  • These are used to change CSS styles when the screen or whatever you are viewing the website from has a certain width. Screen sizes are selected by determining when the design should “break”. For example when you looked at the Dallas Art Fair website, there’s a video as the background for larger view ports (computer monitors) and an image was used for smaller view ports. Media queries can be used to change the page layout, a background image, menu design and other things of that nature when they do not look right at certain view ports.
  • Time to practice! Download the first code here and open it in Visual Studio. Save this file as mediaqueries.html. Check what happens when you resize the browser window – what has happened due to the media queries?
  • When you have the webpage open in the Chrome Web Browser, right click and select inspect. Check out what happens to the page just before it hits 500px and 900px. What occurs? Why is this happening?
  • Why do the boxes still float to the left when the screen size goes beyond 900px?
  • Add more media queries. What do you expect to happen on a smaller screen? What about a larger one? What should box width be? Do we know generic screen sizes for phones, laptops, desktops?
  • Try adding other CSS style properties to the separate media queries, does it work? Try adding background colours to each media query.
  • Try adding more boxes to the page – what do think is going to happen?
  • Now download some new code to fill in some broken portions on the webpage. Call this file broken-mediaqueries.html and open it in Brackets.
  • Fix all the ????? in the code.
  • When you get to the media query, think about the following:
    • The media query we have is for small screen sizes but 320 px won’t be a good break point. Check using inspect on Google Chrome to find a higher (better) number based upon how your page looks. Try looking at the page on different devices using the Toggle Device Toolbar at the top (or ctrl +shift +m)
    • Try the nav tag at 401px and up. How can you fix the text so it isn’t wrapping to two lines? Try creating a new media query by copying and pasting the old one and fixing the code (add a new background-colour to nav).
    • Check the nav as the screen gets bigger. How can you fix it so the nav doesn’t seem too large for the text? Create a new media query by copying and pasting the old one and fixing the code again (add a new background-colour to nav) Rather than percentage values, what value can be used to “automatically” adjust to fit the content? Add some padding too.
    • Now what are the new break points?

2. CSS Grid Layout

  • CSS Grid Layout is another way to work with responsive webpage layouts. It uses columns and rows to organize its’ content.
  • Play this Grid Garden Game to see CSS grid in action!