Mobile Responsive Content

Special codes to make your images fit into mobile screens.

Applies to

This article only applies to images inserted by way of the 'Image" toolbar button in the editor/Word Processor in your website. It does not apply to images that you upload into a plugin such as the Blog/Article Manager, the Store and any gallery or banner/rotators on your website.

Problem

If you insert an image into your content using the toolbar button in the editor, you will find that it displays at a fixed size on all screens and does not shrink or stretch to fit mobile screens. It is not 'mobile-responsive'. This is normal behaviour for an editor. A web developer makes images responsive by way of special code.

Solution

We have added some special code presets to the 'Styles' dropdown on the editor toolbar. You can apply these easily when you insert an image.

1. Insert your image via the Image toolbar button.
2. Double-click the image to bring up the Image Properties dialogue.
3. Clear out the Width and Height fields to remove the fixed dimensions.
4. Click OK
5. Select one of the Image options on the Styles dropdown (hover on each to read the tooltip)
6. Click save and view the page.

• As an example, 'Image 100%' will make the image display at full 100% width of the column it resides in.
• As another example, the class 'Image Right 33%' will float the image to the right of the text and make it 1/3 the width of your content on a large display but fill the column on a mobile screen.

List of all available classes

If you are familiar with HTML and want to edit your code directly, this is the full list of available classes. These special classes are intended for images, but can also be used for tables or divs.

Primary classes
These classes are all case-sensitive. They will do various things, depending on the width of the screen. For example, the class ImageRight33 will display the image at 33% of the content width, floated to the right, with text to the left. When displayed on a phone, the image will stretch to 100% width and the text will stop wrapping.

• ImageFull100
• ImageFull90
• ImageFull80
• ImageFull66
• ImageRight66
• ImageRight50
• ImageRight33
• ImageRight25
• ImageLeft66
• ImageLeft50
• ImageLeft33
• ImageLeft25

Secondary classes
These optional classes will further modify the behaviour of the primary classes. For example, you might want the image from the example above to not display at 100% width on a small screen such as a phone. If you add Phone66 to the class, the image will display at 66% width on the small display e.g. class="ImageFull100 Phone66"

Desktop displays, 1280px or less - These are seldom used after applying one of the primary classes above.

• DesktopHide
• Desktop100
• Desktop90
• Desktop80
• Desktop75
• Desktop66
• Desktop50
• Desktop40
• Desktop33
• Desktop25

Phone displays, 640px or less

The '...Hide' classes, such as PhoneHide will hide the element on a given screen size. You might want to hide a block of content or an image on small displays.

• PhoneHide
• Phone100
• Phone90
• Phone80
• Phone75
• Phone66
• Phone50
• Phone40
• Phone33
• Phone25
• PhoneFloatRight
• PhoneFloatLeft
• PhoneFloatNone

Tablet displays, 800px or less

• TabletHide
• Tablet100
• Tablet90
• Tablet80
• Tablet75
• Tablet66
• Tablet50
• Tablet40
• Tablet33
• Tablet25
• TabletFloatRight
• TabletFloatLeft
• TabletFloatNone

Widescreen displays, anything wider than 1280px - Not all websites have this size enabled.

• WidescreenHide
• WideScreen100
• WideScreen90
• WideScreen80
• WideScreen75
• WideScreen66
• WideScreen50
• WideScreen40
• WideScreen33
• WideScreen25
• WideScreenFloatRight
• WideScreenFloatLeft
• WideScreenFloatNone

Special purpose classes

• ResponsiveYouTube - To make a YouTube video responsive, place the embed code inside a DIV element and add class="ResponsiveYouTube" to the div.