Before we start adding responsive elements to our theme, let's have a look at the basic techniques we're going to work with. When building a site for a device with a small screen, we have to make sure our elements scale relative to the size of the screen.
We might also have to create a different navigation. A wide drop-down navigation would probably not work well on a cell phone.
Media queries are an important part of responsive layouts. They are part of CSS to make it possible to add styles specific to a certain media. Media queries can target the output type, screen size, as well as the device orientation, and even the density of the display.
But let's have a look at a simple example before we get lost in theory: ...