Step 7

Materials for your web page…

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.

None/Hidden: This display can be used to make en 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. Since your full navigation bar will show up just fine, you don't need the menu icon to be visible until the screen size is smaller.

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.

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.

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 and 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.