Site Containers & Max Width

Let’s start by working on the site containers, which includes the styling class attributes of .site-inner and .wrap. As you begin migrating in the media queries, you’ll see that we need to setup the theme’s max-widths. In this episode, let’s setup the different widths and device screen sizes. You’ll walk through the various strategies including hard coding the widths into a variable to writing a formula to calculate the widths based upon the overall base width.

Running calculations is more advanced, but let’s discuss it. Sass can run all different kinds of mathematical equations including elementary addition, subtraction, multiplication, division. It can do floor(), percentage(), ceil(), and more.