No doubt you want to take advantage of the all new Responsive Design Layout in EverWeb 2.8 to make awesome websites that work anywhere including mobile, tablets and desktop computers.

EverWeb is the quickest and easiest way to drag and drop your way to a Responsive Website without any coding experience or “techie” skills.

Today, I want to highlight one of the powerful new Widgets called FlexBox.

FlexBox is a way to add text, images and video to your Responsive website and watching each item respond, or adapt, to the width of your web browser.

You can make text, images and video larger on big screens like desktops, and smaller on small screens like mobile phones.

Using the FlexBox Responsive Widget

The FlexBox widget can be found under your Widgets tab in EverWeb. Just drag and drop it to your Responsive page like you would with any other widget.

Once you have added the FlexBox widget turn back to your Inspector. 

Where you see the ‘Embedded Objects’ list is where you can add you text, images and videos the FlexBox.

From the 'Object Type' drop down menu select the kind of object you want to add and then press the ‘Add’ button.

As you can see from the above image, you have the Object Sizing options and this is where the real flexibility comes in.

The Minimum and Maximum widths let you specify how large or small the object can be resized relative to your browser width. 

Your browser will attempt to show all objects on one row and will resize the objects down to the Minimum width to make room. If it can’t make room, the object will be wrapped to the next line and stacked underneath the other objects in the FlexBox.

Tip: Set a Maximum width to a percentage, such as 100%, if you want the text, image or video to take up the entire row when it gets wrapped to another row.

As you can see from the images below, when the browser window is larger, all the objects are on one line.

Once we make the browser width smaller, the objects are wrapped to the next line. Since we set the Video’s Maximum Width to 100% it now grows to take up the entire width of the browser.

When we make the browser width smaller, we get the video to wrap to the next line at width of 100% as shown below.

As you can see in the above image, the video is now 100% of the browser width.

We’ve also shown how each object can have associated text and a button with MouseOver Color effects.

The FlexBox widget is extremely powerful and free for all users of EverWeb 2.8

We put together a step by step video tutorial that goes more in depth into the true power of the widget. Check it out below or any of our other free tutorials for building your responsive website.