Step 2

Step 2

Media Screens Tutorial

The purpose of media screens is to allow our websites to adapt to multiple screen sizes without changing the HTML code. You can control structural boxes, type size, colors, and the visibility of certain elements. It helps make the page more accessible to the viewer and easier to understand on different screens, such as a cell phone or tablet.

The Code

The code for media screens belongs on the CSS page of your website. Media screen code begins: @media only screen and (max-width: ______px)

☛ IMPORTANT: Do not accidentally delete the end curly bracket! } This is the number one error with media screen code.

It is relevant to note that a media screen code will be displayed in teal. It is also VERY important to note that there is a curly bracket that ends the media screen tag! It can look like an extra curly bracket, but if you delete it, none of your following media screens will work.

States of Display

There are four states of display that are helpful to know when dealing with media screens. These can help you determine how your text will flow on a page, especially in relation to images.

  1. None/Hidden: This display can be used to make an element invisible in a certain media screen. For example, you would want to use this display mode for your menu icon on larger media screens.
  2. Block: A block display element will take up the full width of the screen. This means no other elements will show up on that same line. Examples of this type of display are divs, h1-h6, p, header, and footer.
  3. Inline: An inline element does not start on a new line and only takes up its necessary width. This is the default for all untagged text on an HTML page.
  4. Inline-block: This is used when you want to place blocks next to each other. It works very well for divisions, such as main and align, when you want them to be side-by-side instead of stacked one on top of the other.

Things to Remember

There are a few things to keep in mind when using media screens. The first thing is ONLY CODE WHAT NEEDS TO BE CHANGED. For each media screen, you only need to rewrite the code for the very specific portions of the page you want to alter from screen to screen.

For example, you may not want to change anything about the header no matter what screen size it shows up on. In that case, you do not have to rewrite any of the header code after the foundation media screen (the original CSS code).

However, you may want an image to disappear when the screen gets to or below 990px wide. You would then create a media screen for 990px and set the state of display of the image to hidden. That would cause the image to disappear when the screen is that size or smaller.

One more thing to remember is that CODE CASCADES DOWN. You set up the code for your foundation CSS, and all media screens after that will take on those traits until you change them. It flows like a waterfall from one media screen to the next.