Grid Row Media Widgets

The widget shown above is the image version of the media widgets. The image can be inserted to the left or right of the text section and can appear above or below it on mobile devices when the layout is switched.
Break Point
The break point is the browser or device width at which the layout change takes place. The control has presets for 1059, 799, 739 and 599 which translate to tablet landscape, tablet portrait, phone lamndscape and phone portrait mode.
Width
The item is centered in the browser with a maximum width setting. There is also a control for setting its percentage width so that this can be reduced to display a box shadow when present.
Media
The image should be cropped to size before importing into EverWeb. The image is this demo is 800px wide. This is wide enough for displaying full width on a tablet in portrait mode and gives @2x retina quality on an iphone in portrait mode.
The image has an alt text attribute for entering keywords for the search engines. It can have a border and/or a box shadow and has a control for setting the border radius.
Text
The text block is an HTML5 article element which is vertically centered and has an h1 heading, a paragraph and an optional CTA style link tab.
The font can be web safe or non web safe or Google hosted with a web safe fallback and there is a control for adjusting the vertical spacing of the items in the <article>.
The link can open internal or external pages and in a new window if required.
Container
The container background color has an opacity slider and there are controls for setting the padding and adding a box shadow and/or border and setting a border radius.
Wrapper
The full width wrapper has controls for setting the background color and its opacity and the vertical spacing from the items above and below it.
NOTE: To show the browser background, both the container and the wrapper background colors need to have their opacity adjusted.