Shortcodes - Responsive Content | Nexus Websites Ltd

Difficulty

How long will it take?

5 Minutes

Youtube Video

Not yet available

Step 1

First of all, create or navigate to the page or post that you would like to edit.

The purpose of this shortcode is to display different content based upon the size of the browser – this will allow you to filter content to be more appropriate for viewing on handheld devices.

Step 2

Click on the shortcode dropdown, signified by a [] symbol.

Step 3

Click on the shortcode named ‘Content’ to insert it into the page.

Step 4

In the opening tag, enter the minimum width, in pixels, the content inside this shortcode will be displayed in.

If you don’t want a minimum display size, enter “0”.

Step 5

In the opening tag, enter the maximum width, in pixels, the content inside this shortcode will be displayed in.

If you don’t want a maximum display size, enter “0”.

Step 6

Enter the content you want to be displayed for the shortcode in between the tags

As seen in this example – you can click between the shortcode tags and the content, and press enter to create some additional space to help you edit the text more easily.

Step 7

Submit, update, publish or preview your page or post and it should look similar to this image.

We had to narrow the browser size in the screenshot so the content would display.

Additional Information – Content Sizes

If your website with us is responsive, then there are five different layout types that we use. When creating content for different browser sizes, it is recommended that you use the following settings:

Small Mobile: Minimum 0 – Maximum 469.

Large Mobile: Minimum 470 – Maximum 639.

Small Tablet: Minimum 640 – Maximum 767.

Large Tablet: Minimum 768 – Maximum 1019.

Desktop PC: Minimum 1020 – Maximum 0.

A maximum of “0” also means infinite.