What is responsive design? In short, it means that your site looks and operates well at any dimensions. It should look nice and be usable whether it is being viewed on a monitor of 1600 x 1200 pixels (width x height) or on a mobile phone of 375 x 667 (again, width x height). Notice in those two example screen dimensions, the monitor is wider than it is tall, and the phone is taller than it is wide.
We have a few things that we will do to make your page more responsive. We will only be scratching the surface of what is possible, because the rabbit hole goes deep. What we will not be doing in this lesson is defining any css media queries. We will simply be making use of the benefits of fluid layout techniques.
Instructions
Content scaling
You content should scale with the width of the window. Meaning, as you reduce the size, your content should shrink to stay visible, without scrolling horizontally <- or ->.
WORK IN PROGRESS
What is responsive design? In short, it means that your site looks and operates well at any dimensions. It should look nice and be usable whether it is being viewed on a monitor of 1600 x 1200 pixels (width x height) or on a mobile phone of 375 x 667 (again, width x height). Notice in those two example screen dimensions, the monitor is wider than it is tall, and the phone is taller than it is wide.
Check out Google's responsive design description and illustrative animation
We have a few things that we will do to make your page more responsive. We will only be scratching the surface of what is possible, because the rabbit hole goes deep. What we will not be doing in this lesson is defining any css media queries. We will simply be making use of the benefits of fluid layout techniques.
Instructions
Content scaling