Mobile Text Wrap

This is an HTML5 container which can be set to either an article, an aside or a section.
It contsins an optional h1 heading, an optional paragraph, an image with a text block that wraps around it and an optional footer.
The widget is made responsive by checking the Full Width box in the Metrics inspector and setting a maximum width. A suitable value for this is 736px which is the width of the largest iPhone screen when viewed in landscape mode.

Image
The image has an alt text attribute and is floated left with a variable percentage width so that the text wraps around when viewed in landscape mode. It becomes full width when viewed in portarait mode.
The break point at which this change takes place is set to 479px which is slightly less than the screen width of the smallest iPhone when viewed in landscape. The break point can be changed if required.
Heading
There is a checkbox to show the heading and it can be adjusted for font size and text align.
Both the heading and the text content can use a web safe font or a non websafe or Google hosted font with a web safe fallback.
Text
The text content has controls for adjusting the font size and line height. Text is entered as HTML so line breaks are created using <br>.
Special characters are also created using HTML such as &amp; for an ampersand and &copy; for the © symbol. See the Info section for more about text.
The paragraph headings in this example are created using a <span> tag in much the same way as the EverWeb app does in text content …

<span style="color:#0000FF">Text</span>

Hyperlink
Text links can be created as described in the Info section and the controls in the widget settings are for link color, background and opacity, text decoration top/bottom and left/right padding and border radius.
Adding padding to text hyperlinks is absolutely essential on mobile websites to increase the target area for fingertips rather than a cursor!
Links should be at least 28px in height and 32px wide for fingertips or 40px for thumbs.
Footer
The optional footer is fixed height with one line for the copyright info. As mentioned previously, the © symbol is created using &copy;
The font color, size and background color can be adjusted. There is a checkbox for adding a script to auto update the copyright year and another for adding a smooth scroll to the top chevron.