Text Wrap Modal
Text Wrap Around Image
The modal has a maximum width setting and a height setting. When the content is greater than the modal window it can be scrolled.
The text wrapped image's width can be varied and it can occupy the full width of the modal if required.
Since the modal is an HTML5 container, it can have an h1 heading inserted prior to the image and the text.
Set the modal's maximum width and its height.
Choose the image, set its percentage width and enter alt text for SEO.
Enter the heading and the text content.
Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font color and the background color.
Set the heading and text font sizes.
Set the text content's line height and the overall padding.
Set a border width, color and radius if required.
Set the box shadow color and radius if required.
For instructions on setting up the modal button and general instructions about the modals, click the link below.
The widget creates a modal with an image which can either be full width or floated left to allow the text to wrap around it.
The modal has a percentage width to allow it to be responsive but there is also a maximum width setting to keep it under control and stop it sprreading out too wide on large screens with wide browser settings.
The modal height is adjustable and any content overflow is hidden. When the content height is greater then the height of the modal, the content can be scrolled.
Text is added to the modal as HTML so it is necessary to use HTML5 line breaks <br> for returns and to avoid using special characters.
Unless there is a separate version of the site created specifically for tablet devices, it is essential to test these modals on an iPad or the iOS Simulator app since it may be necessary to reduce the maximum width to that of the touch device's screen width to prevent the text size being reduced too much.
This modal has its maximum width set to 1000px so the text will be quite difficult to read when viewed on a tablet device in portrait mode. Try it!
Normally, when wrapping text around an image, the text is made to wrap evenly by adjusting the line height. Since this item is responsive. the wrap will change as the modal width is varied and the layout is not ideal at all times. Welcome to the world of responsive design and its many little problems!
This widget is included in the Full Width Addons widget pack.