Throughout the course of this chapter, we've covered the different parts that make up media queries as I am sure someone once said, it is time.
Yes, it's time to put this into practice. Before we start creating some real-world examples, let's create something we can use to explore the effects of adding a media query to code. We'll start by resizing some simple boxes on screen:
From the code download, go ahead and extract a copy of
queryexample.html
and save it to our project area.In a text editor, go ahead and add the following styles; we'll start with some basic styles for our boxes:
body { background-color: #F3ECDD; text-align: center; font-family: Arial, sans-serif; color: #ffffff; min-width: 33%; } .box { width: 100%; background: #905f20; border-radius: 0.625em; margin: 0; } .box2{ min-width: 100%; background: #6b8e6f; border-radius: 0.625rem...