Responsive Scroll Box

Responsive Width Fixed Height

The scroll box is design to overcome the problem of having responsive width items which can be placed above other items and not over run them at narrower browser or device widths. When the width is reduced to a predetermined amount, the scroll arrows appear in the header and the content is scrollable.
The arrows appear using media queries and the browser/device width at which this happens is user adjustable.
If viewing this page on a computer, reduce the browser width to see the responsive action or use the browser's responsive mode to see how it looks on the diferent mobile devices.

responsive scroll box widget

Box Content

The box has an h1 heading which can have a contrasting background. The heading can be fixed so that it remains in position when the rest of the content scrolls by checking a box.
The optional h2 heading and text block preceed the image and the text occupies the full width.
The image is optional and is floated left with a control for setting the percentage width. This allows the text to wrap around it if required. The image becomes full width when the page is viewed on a mobile phone in portrait mode.
The image can also be set to the full width of the container. It has a field to add alt text for SEO and can be configured as an internal link if required.
The h3 heading is optional and preceeds the wrap text.
The way in which the text wraps the image at full width is adjusted using the values for image width and the text line height.
Container
The container is made responsive by checking the "Full Width" box in the Metrics inspector and setting a maximum width. The maximum width of an item containing full width text should not exceed 1000px. Any wider and it becomes difficult for the eye to transition from the end of one line to the beginning of the next. The container can have a border with radiused corners if required.
Height
If the box is being used to show a large amount of content in a compact manner on the full site, the box height can be set at any convenient value using a drag handle or the Metrics inspector.
If it is being used on a full site page which is responsive down to the width of an iPad in portrait mode, the box height should be set to display all the content and the arrows set to appear at 799px.
If the box is being used on a fully respnsive page or a responsive mobile page, the arrows should be set to appear at 1059px.
Responsive Layout Text & Links
Check out the info pages to find out how to set up responsive pages, enter text into widgets and create links. The text hyperlink styles can be set in the widget inspector and have controls for color, hover color and text decoration.

EverWeb Widgets