Responsive design

Hello Wade!

Wha you want to achieve can be done with media queries.

Media queries are most simply put - a css stylesheet within your css stylesheet :) They are telling the browser how to style your website at a certain device display width;

A media query looks something like this:

div.box {
        width: 200px;
        height: 200px;
        background-color: red
}

@media screen and (max-width: 340px) {
        div.box {
                display:none;
        }
}

In the sample above we have a div with a class="box" , which by default has a width and height of 200px with a red background. What the media query does is, it is telling to the browser - when the browser width gets below 340px, apply a "display: none" to the div with the class of "box". The display: none; property removes the object from the document flow.

It is considered a best practice to place your @media queries at the bottom of your *.css file, after all of your styles.

I hope I made some clarification! Cheers!