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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.