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 'Insert 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.

Issue

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 classes to the 'Styles' dropdown on the editor toolbar. If you have inserted an image and then click it so it becomes highlighted, you will find options such as 'ImageFull100' on the dropdown. If you can't read the options due to your font size, hover for a moment and a tooltip will appear.

Select a class and then save and view the result. As an example, the class 'ImageFull100' will make the image display at full 100% width and it will be stretchy to fit all screens.

As another example, the class 'ImageRight33' will float the image to the right and make it 1/3 the width of your content. When the page is viewed on a small phone screen, the image will stretch to the full wdith and your content will go underneath.

The most useful classes are

• ImageFull100 - Use for full width images
• ImageRight33 - Use for images floated to the right with text to the left.

Problems

If you are trying to make an image responsive and it refuses to work, click the 'Source' toobar button and look for any width or height styles ( e.g. style="height:230px;width:180px;") and remove them. Ask for help with this. What you should see in the code is something like class="ImageRight33"

As an example, your original image tag might look like this:

    <img src="/path/to/image.jpg" style="">

Or like this:

    <img src="/path/to/image.jpg" style="height:230px;width:180px;">

Remove the red and add the green to look like this:

    <img src="/path/to/image.jpg" class="ImageRight33">

List of available classes

These special classes are intended for images, but can also be used for tables or divs. If you want to change the HTML Source on your own, you can use the classes listed here.

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.