Responsive Text Wrap Image
The contents are contained in an HTML5 section element which is centered in the browser with 100% width and a maximum width to stop it spreading out to much at wide browser settings.
Creating a responsive item in EverWeb requires the page content width to be set to the narrowest width required. If the page is to be responsive down to the width of an iPad in portrait mode, the content width should be set to 774px. For a fully responsive page suitable for all devices, the content width should be set to 320px - the width of the smallest iPhone in portrait mode.
The responsive widget is dragged onto the design canvas and, when the "Full Width" box in the Metrics inspector is checked, it will expand to the maximum width setting.
The image is floated left so that the optional h2 heading and the text in the second paragraph can slide up and wrap around it.
The image width is expressed as a percentage so that it adjusts along with the browser or device width. The image can be set to full width if required by dragging the "Image Width" slider to its maximum value.
Using media queries which are preset, the image becomes full width when the page is viewed on mobile phones in portrait mode.
The image can be configured as an internal link if required by checking a box and choosing the "Link to:" page.
The optional CTA style link is centered and floats below the text. It can be configured as an internal link.
The link tab is large enough to make any easy target for fingertips when the page is viewed on a touch devices.
Responsive items containing text need special consideration when setting the maximum width. As a text block gets wider, it becomes more difficult for the eye to transition from the end of one line to the begining of the next. 980px is the generally accepted maximum width for unbroken text. If the page content's maximum width needs to be greater than this, the text should be arranged in narrower chunks using one of the Responsive Column or the Sidebar widget.
The widget has an optional footer which has auto update of the copyright date and an optional smooth scroll back to the top chevron. This allows the widget to create the content for a fully responsive page when used in conjunction with a suitable header/navigation window.
Like all the responsive content widgets, this one can be used below one or more Hero widgets to create a full site page which is responsive down to the width of an iPad in portrait mode.