EverWeb Widgets

Responsive Text

Auto Text Widget

Text on a website should - first and foremost - be readable. For maximum readability, use Verdana as the font family with a minumum size of 15px.
The text should be black (#000000) on a slightly off white background (#FEFEFE).
Use a minimum line height of 20px and never justify text.
Blocks of text used on responsive websites require special consideration. If the lines are too long, it becomes difficult for the eye to transition from the end of one line to the begining of the next. This can be remedied by limiting the maximum width of the container to about 800px but this may not suit the style of the layout.
Columns
One solution is to use auto columns like this widget. At wider screen widths, the text is divided into as many columns as required columns when viewed on computers. As the browser or device width is reduced, the number of columns is reduced too.
The text overflows from one column to the next to maintain a balanced layout.
Auto Text
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The heading is optional and can be styled for font size, style, weight and align.
The text has controls for font size, color, text align and line height.
The container background color can be set and has adjustable opacity.
Text Links
Text links are created using THESE instructions and styled in the widget settings for font color, hover color and text decoration. Extra padding has been added to the link styles to make them easier target for fingertips on touch devices.
Spans
Styled spans can be created following the instructions on this INFO page. They can be styled for font size, line height, color and font weight and style.
Columns
The column gap can be adjusted and vertical lines added to separate the columns using the column "Rule Width" control.
The number of columns can be set for computer, tablet and mobile phone.
Module Styles
The module can be styled with a border and/or box shadow.
When a box shadow is added, the module width is reduced slightly to allow it to show on mobile devices. The vertical spacing should be set to, at least, the same value as the box shadow radius.

Responsive Text Wrap Image Lighbox

EverWeb Responsive Lightbox Module
Responsive Image Lightbox

Text Wrapped Lightbox Image

The image is floated left so that the optional h1 heading and the text in the second paragraph can slide up and wrap around it. It can be floated right if required.
Clicking or tapping the lightbox icon opens the large image in a lightbox window. The large image is responsive up to the width of the image file.
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.
The image has an optional overlay caption which can appear either on hover or on page load when viewed on computers and on page load when viewed on touch devices.
When the page is loaded on a mobile phone, the image becomes 100% wide.
The module can be styled with a border and/or box shadow. When a box shadow is added, the module width is reduced slightly to allow it to show on mobile devices. The vertical spacing should be set to, at least, the same value as the box shadow radius.
There are controls in the widget setings for styling text links which need to be entered as HTML. See this INFO page for instructions.

Disqus Comments

The widget creates a responsive container for Disqus comments with an optional border. It has fields for the Disqus shortname, the page URL and a page ID for indicating which comments come from a particular page if there is more than one comments box on the site.
Follow the Disqus link below to signup and get started …

Disqus

© EverWeb Widgets -