O'Reilly logo

Mastering OpenLayers 3 by Gábor Farkas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive styling with CSS

In the first example, called ch08_css, we will create the layout of our application. We differentiate three styling methods. If the device is a desktop computer, we use regular styling, as in Chapter 2, Applying Custom Styles. If we come through a touch screen device, though, we use different rules for controls. Furthermore, we apply a slightly different style to the application in portrait mode than in landscape mode.

Firstly, we create the required elements in the HTML file in our example:

<body>
    <div id="map" class="map">
        <div id="toolbar" class="toolbar"></div>
    </div>
</body>

This part is more simple than ever before. However, in this case, we create our toolbar inside the map element. We will discuss the importance ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required