In this part, we'll add everything that's necessary to make the previously created theme ready for small-screen devices. To do this, we'll have to add some CSS files and also create a new autonav
block template to create a mobile-friendly navigation.
The bootstrap framework we've worked with offers a wide variety of options to create a responsive layout. The most important part is a CSS file you can find in the bootstrap archive you've downloaded. Before you start making modifications, create a new copy of our theme by copying bootstrap9
to bootstrap10
. If you don't have the bootstrap ZIP file anymore, go to http://twitter.github.com/bootstrap/ and download the current version. From that ZIP file, extract bootstrap-responsive.min.css
and copy it to themes/bootstrap10/css/bootstrap-responsive.min.css
.
Next, we have to make sure this file is included in our theme. Open elements/header.php
and insert the highlighted line:
<...