Showing or Hiding Content on Mobile Responsive Website Design

There are many topics up for debate when it comes to website design and what really needs to be focused on. One thing that everyone can agree on is that having a mobile responsive website design is absolutely essential so that your potential clients and customers can consume your website content easily from a mobile device.

The great thing about responsive websites is that the site automatically restructures for you. The problem is that the content within your pages must also be mobile friendly. For example, you may have a very large slideshow on your homepage with text on top of it. Looks great on the desktop right? The problem is that on mobile, the text is tiny and unreadable.

In this week’s WordPress tutorial I will show you have to solve an issue like this using shortcodes because what you can do is keep that awesome slider but make it so that it’s hidden on smartphones and other devices. You can then use an additional set of shortcodes to choose what will show in its place.

Table of Contents:

Installing the plugin:0:49
Using the shortcodes: 1:50
Discussing when this would be used: 3:39

Search: “WP Mobile Detect” or download here:
https://wordpress.org/plugins/wp-mobile-detect/

Shortcodes:

Content that you want to show on mobile only: [device][/device]
Content for desktop version only: [notdevice][/notdevice]