How to make a WordPress page mobile friendly without using a Plugin

Introduction

Have you got WordPress Hosting and you like to do things the stock / vanilla way?

The issue is that WordPress does not include bootstrap. So there is not easy to do do this:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

However, with just a bit of CSS you can solve this problem, and make those nasty “Page is not mobile friendly” error messages from Google go away.

To do so, in your WordPress Hosting, go to Appearance -> Customize -> Additional CSS. Then add the following:

@media only screen and (max-width: 768px) {
   .responsive-table {
      overflow: hidden;
      overflow-x: scroll;
      display:block;
   }
}

Then go to the table that you want to make responsive. Use the following code to make it refer to above CSS:

<div class="responsive-table">
<table class="table">
...
</table>
</div>

As easy as that! To see if your table is now responsive, go back to Google’s test here:
https://search.google.com/test/mobile-friendly