Fun Things to Do with CSS
Responsive Design
Responsive Design in this context means that the content of the page will change according to the width of the screen on the device you're using to view it.All these pages will look exactly the way I want them to on my computer. But what if I look at them on my phone? Take another look at Galveston and then look at it the way my phone would see it.
As you can see, it isn't very user-friendly.
I can make it more so by telling the browser to adjust the way the page is displayed according to the width of the device.
I use @media and assign a width.
@media only screen and (max-width:500px) {
#outer-wrapper {
width: 100%;
}
}
(I wasn't able to demonstrate this at the meeting so ... re-size your browser window by clicking the boxes in the top right corner to remove the full-screen and then drag the right side of the window left and right to watch the transition.)