Responsive Styling

---

Responsive Rendering

The standard in modern web development is for sites to be fully responsive, meaning their appearance should respond to changes in the size of the viewport. As developers, we have the ability to style our CSS according to what size screen the user has; this makes sure that our content looks great and is engaging regardless if they're on a phone or an ultrawide monitor.

Media Queries

The main way of creating responsive pages is to use something called a media query. These enable us to define more specific rules for our content based on the screen size.

For example, let's say we have a div with two columns - an image and another div with a headline and a paragraph. Our HTMl looks like this:

1<div class="headline">
2  <img srec="path/to/image" alt="alt text" />
3  <div>
4    <h2>Headline for Article</h2>
5    <p>
6      Magna nulla dolore laborum pariatur sint elit sunt ipsum tempor non sint
7      anim et cillum. Nulla officia dolore labore pariatur do ad cupidatat ut.
8      Dolore Lorem adipisicing aliqua velit mollit commodo cupidatat aliquip
9      non. Dolor eu elit exercitation ut quis id quis.
10    </p>
11  </div>
12</div>

And our CSS looks like this:

1.headline {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  width: 100%;
5  min-height: 400px;
6}

This headline component would get squished and not look great on smaller screens, like phones. Instead, we can include a media query to rearrange the way its rendered:

1.headline {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  width: 100%;
5  min-height: 400px;
6
7  @media (max-width: 600px) {
8    grid-template-columns: 1fr;
9  }
10}

This new set of rules, which only has one key-value pair, overrides the existing rules when the screen is 600px or smaller. So, on phones, we have a single column instead of two side-by-side columns.

CSS Functions

Media queries work well and, especially in the beginning, should be your go-to tool for making sure your site is responsive. However, there are other more abstracted ways of making your site responsive: CSS functions.

Functions work in CSS just like in other languages: they're actions that take in an argument and return a value. A simple example is utilizing colors the way we have throughout this course:

1color: rgb(255, 0, 0);

You'll typically know a function is involved whenever you see parenthesis taking in arguments; in the case above the rgb function is taking in three arguments for the colors to produce red.

However, there are many more functions that we can use to do some really cool things; particularly with grids.

Let's say we're using this grid from earlier:

1.headline {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  width: 100%;
5  min-height: 400px;
6}

Instead of hardcoding the values of 1fr 1fr for the columns, we're going to tell the browser, "Here's the minimum size a column can be; if it gets to be smaller than that, here's the value it should be instead." We can do that using a few arguments to the CSS repeat function.

1.headline {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
4  width: 100%;
5  min-height: 400px;
6}

The repeat function is taking in two arguments: auto-fit and the minmax function. auto-fit is a value of grids that tells the browser, "Automatically place these items inside the grid so long as there's space." The minmax function takes in the min value and max value, as arguments, for the element itself.

This translates to, "For this item, if the column is more than 350px wide, then we're fine. If the column is less than 350px, turn the element into a width of 1fr."

Practice Makes Perfect

While media queries are pretty easy to pick up, the idea of utilizing functions to style our pages takes some time and practice. There's a bunch of assignments set up for this lesson, so take your time and work on those styling-muscles!

---

Previous and Next Lessons: