Now that we have our HTML elements in place, let's head to the CSS file in this example. As you can see, we completely removed the map container from our design, putting everything in the map element. This way, we have to size our map element to have a full screen application:

.map {
    width: 100%;
    height: 100%; /*Fallback*/
    height: 100vh;
}

The rule for our tool bar is almost identical to the one used in Chapter 2, Applying Custom Styles. However, as we place it on top of our map, we position it accordingly and use an arbitrary high Z-index. This way, our control buttons won't get covered up by the map canvas:

.toolbar {
    height: 2em;
    padding: .2em;
    position: absolute;
    z-index: 999;
}

For the control buttons, we stop displaying them as table elements as we do not have to align them vertically anymore. Furthermore, we remove the distracting background color from them:

.toolbar .ol-control {
    position: static;
    display: inline-block;
    padding: 0;
}
.toolbar .ol-control {
    background-color: rgba(0,0,0,0);
}
.toolbar .ol-control button {
    border-radius: 2px;
    width: 2em;
    background-color: rgba(219,63,63,.5);
    display: inline-block;
}

Next, we define some touch screen-only rules. We handle touch screen devices by adding an ol-touch class to the map element when we encounter one. As hovering does not make sense on touch devices, we disable that feature:

.ol-touch .toolbar .ol-control button {
    background-color: rgba(219,63,63,0.5);
}
.ol-touch .toolbar .ol-control button:hover {
    background-color: rgba(219,63,63,0.5);
}

Finally, we separate portrait styling from landscape styling with some media queries. When we have a portrait orientation, we make the control buttons look similar to the desktop styling, just bigger:

@media only screen and (orientation: portrait) {
    .ol-touch .toolbar {
        height: 2rem;
    }
    .ol-touch .toolbar .ol-control {
        height: 2rem;
    }
    .ol-touch .toolbar .ol-control button {
        width: 3rem;
        height: 2rem;
    }
}

If we change our device's orientation to landscape, however, we make our controls appear on the left-hand side as we have rotated the tool bar by 90 degrees clockwise. This way, we create a feeling in the users that our controls cover up the least space possible from the application:

@media only screen and (orientation: landscape) {
    .ol-touch .toolbar {
        width: 2rem;
    }
    .ol-touch .toolbar .ol-control {
        display: block;
        width: 2rem;
    }
    .ol-touch .toolbar .ol-control button {
        height: 3rem;
        width: 2rem;
    }
}

As a final step, we construct our map object. It is simple, just like in Chapter 2, Applying Custom Styles. The only modification lies in touch detection. OpenLayers 3 grants some convenient browser feature detection methods in the namespace ol.has. One of them can easily detect touch screen devices, which we will use in this chapter:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    controls: [
        new ol.control.Zoom({
            target: 'toolbar'
        })
    ],
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});
if (ol.has.TOUCH) {
    document.getElementById('map').classList.add('ol-touch');
}

If we detect a touch screen, we add the ol-touch class to our map element, just like we mentioned previously. Now, if you save the code and load it in a browser, you will see our new design in action, as shown in the following screenshot. Don't forget to check it with a smartphone (or a smartphone simulator) and a desktop computer too:

Don't worry about the small buttons in portrait mode and the address bar covering up valuable map space in landscape mode. Our application will look great in full screen mode, just after we implement it.