fbpx
  • Win a Fitbit Inspire HR when you move your hosting to us. Competition ends 30 November 2019

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

Reference:
https://themeskills.com/make-table-responsive-wordpress/

Share this article

Share on facebook
Share on twitter
Share on linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top