Text wrappimg an image is a sstyle borrowed ffrom print media such as newspapers and magazines and you dont see too many of these around !
Text wrap can be combined with more up to date CSS techniques to create unique responsive layouts without looking dated.
Content separation is the key to a successfull responsive web page layout by drawing attention to key information.
This example uses a two column CSS grid and a float applied to the image to create a more interesting layout with the key elements separated.
Image
The image is floated left in the usual waywith a 50% width and a suitable left padding.
On mobile phones the image becomes full width and pushes the text down below it. The image can have a border to define its edges if required. It has controls for border width, color and radius.
Navigation Links
An optional row of CTA (call to action) style links can be added at the bottom. They can be configured to open internal or external pages.
NOTE that links in text should be avoide in responsive website designs. They are very unfriendly for mobile device users. According to Google links on mobile designs need to have a clear 40px radius around them for the best user experience.
The two column grid is centered with a maximum width setting .It has controls for switching the layout and setting a column gap - in this case 20px - which adjusts the spacing between the main heading and the image.
Overlap
The overlap is created by applying top padding to add the space for the main heading.
Image
The image with alt text and lazy loading option is moved up into this space using a negative top margin equal to the grid's top padding which - in this case - is set to 20px.
The image in this eample is 600px square and has the lazy load option checked since it is not in view on page load. It has a border with radiused corners.
Heading
The main heading has lots of styling options and can be vertically aligned top, center or bottom in thespace above the text
Text
The wrap text has an h2 headingand the sub headings are inserted using spans. A <span> tag is an inline container used to mark up a part of text.
Spans are inserted in the widget's text box like this …
<span>Span Text</span>EverWeb uses spans to style individual words or phrases using inline styles. This is not good pratice and should be avoided.
EverWeb Widgets ThemeKit widgets use spans which have the styles in the internal styles in the HTML document <head> or in an external, minified stylesheet - much better!