📝 Penn Week 6b – Media Queries, Positioning, Flexbox, Coding Office Hours

Layouts & Responsive Design

Unlike print, digital design is experienced on a variety of formats (for example, phones, tablets, a variable browser window), so as designer’s we need to create a system that works on many different formats. As developers, we need to keep this in mind for the same reasons.

If you’d like to follow along, create an index.html and main.css file, or copy and paste the following and also create a blank css file.
<!DOCTYPE html>
<html>
<head>
  <title>Layouts and Responsive Design</title>
  <link rel="stylesheet" type="text/css" href="assets/main.css">
</head>
<body>
  <div class="container">
    <div class="item">
      Hello!
    </div>
  </div>
</body>
</html>

Media Queries

Media queries are a CSS technique that allow you to target specific capabilities of a device. It uses the @media rule to define how the CSS will change only if that condition is true.

/* If the browser window is smaller than 500px, the background color will change to lightblue: */
@media (max-width: 500px) {
  body {
    background-color: lightblue;
  }
}

Media queries can be used to target vertical rules as well:
/* If the browser window is shorter than 650px, the background will turn orange */


@media (max-height: 650px) {
  body {
    background-color: orange;
  }

Specifying a max-width or max-height in a media query is often used when you write CSS for your website viewed on desktop, but if you want it to look different at a smaller, or larger, breakpoint. It’s also helpful in fine-tuning some of your design elements on a variety of sizes.

The points at which media queries take affect are also known as breakpoints.
For example, the breakpoints in Bootstrap’s default grid are as follows:
< 768 px Phones
≥ 768px Tablets
≥ 992px Medium desktops
≥ 1200px Large desktops

/* The body's font-size is smaller by default */
body {