Side by Side Scroll Boxes

Full Width Scrollboxes Widget

Text - Image - Text Wrap

This widget is exactly the same as the one on the preceeding page except it has two, side by side boxes which each occupy 50 percent of the container.
Each box can have text only, text with an optional heading, full width image or a percentage width image to allow the text to wrap.

Text Only

Full Width Design

While the Full Width widgets can create a responsive look and feel to a page design it is important to realise their limitations. When an item like this text box expands and contracts with variations in browser width, the height varies too.
In a truly responsive design such as those created using the Flex widgets, the items below will move up/down the page to accomodate these changes in height. Since items inserted onto the EverWeb design canvas are given a fixed vertical position, this is not possible.
Many of the widgets have been designed to employ a fixed height as can be seen from the exampls on this demo site. Others, like this text box, have varying height and this needs to be compensated for.
The variance in height can be reduced by setting a realistic maximum width for the text box and also by spacing items out vertically to avoid overlap at narrower browser settings or when the page is viewed on a tablet device in portrait mode.

If there isn't separate version of the site for tablet users, the full site page will work OK as long as certain factors are taken into consideration.
Make sure the page content width is no wider than 980px. Lower is better and 780px is best.
The wider the maximum width setting for an item like a text box, the more vertical spacing it requires from the item below it.
Module widgets should have a width setting which is less than one third of the page content width and may require some extra height.
Use one of the Full Width Header widgets and make sure the checkbox next to "Tap to close" is checked so that visitors can close the navigation menu dropdowns on touch devices.
Make sure that the navigation links are given enough top/bottom padding to give them a minimum of 28px in height when viewed on an iPad or other tablet device.
Do NOT use text hyperlinks. Use image links or CTA buttons like the ones on this page.
Test all the pages on an iPad device using the iOS Simulator.

Text Wrap Image

Full Width Scroll Boxes

In simple terms, items are made responsive by giving them a percentage width and an "auto" height. Although some items can have 100% width, most would look ridiculous when viewed on a large screen width a wide browser setting. To avoid this, items are centered on the page and given a maximum width. To see the responsive action of the items on this page, vary the browser width from full screen width do to the page content width which will be indicated by the appearance of the horizontal scrollbar at the bottom of the browser window.

While the Full Width widgets can create a responsive look and feel to a page design it is important to realise their limitations. When an item like this text box expands and contracts with variations in browser width, the height varies too. In a truly responsive design such as those created using the Flex widgets, the items below will move up/down the page to accomodate these changes in height. Since items inserted onto the EverWeb design canvas are given a fixed vertical position, this is not possible. Many of the widgets have been designed to employ a fixed height as can be seen from the exampls on this demo site. Others, like this text box, have varying height and this needs to be compensated for. The variance in height can be reduced by setting a realistic maximum width for the text box and also by spacing items out vertically to avoid overlap at narrower browser settings or when the page is viewed on a tablet device in portrait mode.

Full Width 2 x Scroll Box

Widget Settings

Only the first settings are shown in the screenshot to the right since they are essentially the same as those on the preceeding page except for the extra controls for the second box.

Check the "Full Width" box in the Metrics inspector and set the maximum width and the height of the box.
Enter the titles for both boxes and check the box to show the scroll arrow if required.
Enter the font name, check the box of it is Google hosted and select a suitable web safe fallback font.
Set the title font size, color and background color.

For each box, check the box to display an image if required, choose the image, enter alt text and adjust its width.

Check the box to display a heading if required and enter it.
Enter the text and set the heading and text font sizes, font color and the background color and its opacity.
Set the overall padding and the paragraph text line height.
Set the container border width and color and/or box shadow radius and color if required.

This widget is included in the Full Width Addons widget pack.

EverWeb Widgets | Full Width