Mobile Responsive Content

These special CSS/stylesheet classes are intended for images, but can also be used for tables or divs.

To use them, switch to HTML view in the online editor, find the tag you want to modify and insert (for example) class="ImageFull100" within the tag. 

Be sure to also remove any width or height styles that might also be present as they will cause conflict.

 
Example usage

Your original image tag might look like this (with angle brackets removed here):

    img src="https://wonderwebs.wonderwebs.com/path/to/image.jpg" style=""

Or like this:

    img src="https://wonderwebs.wonderwebs.com/path/to/image.jpg" style="height:230px;width:180px;"

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

    img src="https://wonderwebs.wonderwebs.com/path/to/image.jpg" class="ImageRight33"

The most typical classes to use are:

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

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.

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.

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