How to do it...

For this recipe, we will use the excellent semantic UI CSS framework. To use it, you have to include the CSS library as a dependency or as a <link> tag. For example, you can put the following code in the <head> of your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.css" />

If you are using JSFiddle, the link inside should be sufficient.

Another tag you have to add to your page for it to look good on mobile is this:

<meta name="viewport" content="width=device-width">

This tells the mobile browser that the width of the page is equal to the width of the device. If you don't put this, the mobile may assume that the page is much larger than the phone and, trying to display ...

Get Vue.js 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.