Mac SEO Blog

Creating a responsive website can be challenging to first time website creators but EverWeb does most of the lifting leaving you free to create the website design you want. EverWeb has may different tools to help you craft your responsive website including the ‘Maximum Width’ option.

About Maximum Width

EverWeb’s Maximum Width option allows you to limit how far objects are to be spread out across the page. You can be find the option in a number of different places within EverWeb, for example in widgets such as the FlexBox, Text Section and Responsive Image Gallery widgets. You will also find Maximum Width as an option in the Metrics Inspector, allowing you to control TextBox, Shapes and full width image widths. And finally, the option is also available in the Responsive Row Widget where it is known as ‘Content Maximum Width’.

Content Maximum Width in the Responsive Row Widget

Using the Maximum width options in EverWeb. can help finesse your website’s that it is perfect on whichever hardware it is viewed upon. The option is especially valuable when using the Responsive Row widget where it is called ‘Content Maximum Width’. As you may already know, the Responsive Row widget is used when you have fixed width objects, such as the PayPal widget, that you want to display properly within a responsive environment.

The Responsive Row widget has a number of different options such as ‘Insert Margin’ to add space between each fixed width object within the Responsive Row widget, top and bottom ‘Padding’ and Vertical and Horizontal ‘Alignment’ options. The Horizontal Alignment option is where we can see how useful the Content Maximum Width option can be. The alignment option allows you to display objects within the Responsive Row widget as either Left, Center, Right, Justify or Center-Justify. In the following example, the Justify-Center option will be used.

Using Content Maximum Width

For this example:

1. Start by adding a Responsive Row widget to the page.
2. Next drag and drop three Text Section widgets into the Responsive Row widget. When dropping the Text Section widget in to the Responsive Row widget, the Responsive Row widget border should become blue indicating that the Text Section is being embedded into the Responsive Row widget.
3. Style the Text Section widgets with an image and some text.
4. When adding an image to the Text Section widget, set the Width value to 180 pixels wide and set the Height to ‘auto’ so that the image retains its proportions.
5. For each Text Section widget set the width of the widget itself in the Metrics Inspector to 200 pixels wide.
6. Next select the Responsive Row widget by clicking in an empty area of the widget. Click on the Widget Settings button if these are not already displayed in the Inspector Window.
7. Add some space between the Text Section widgets by setting the ‘Insert Margin’ value to 30.
8. Finally set the Horizontal Width value in the Alignment section to ‘Justify-Center’.

Now that the Responsive Row has been set up, Preview the page and increase and decrease the width of the browser window to see the effect. What you should see is that the space between each Text Section widget gets larger as you increase the width of the browser window. This will create a lot of white space between the Text Section widgets which does not look good on a laptop or desktop. Your Text Section widgets may also appear to be ungrouped which you might not want either.

To resolve this problem, we will need to set a value for Content Maximum Width in the Responsive Row widget, so first go back to your EverWeb Project file. in the ‘Content Maximum Width’ field, the default value is set at 0 which means the whole width of the Responsive Row widget. Change this value to 800 and Preview again. This time you will notice that the three Text Section widgets remain grouped together. As you increase the browser width, the space between each widget does increase but only by an acceptable amount. You may want to experiment with setting the ‘Content Maximum Width’ value to e.g. 1000 or 1200 to see the effect.

Calculating Content Maximum Width

The value that you use for Content Maximum Width will depend on the width of the objects within the Responsive Row widget plus the Insert Margin value between each of the objects and any left and right margin that you may have set in the Metrics Inspector. So, in this example we have 200+30+200+30+200+30=690. If you set the value of Content Maximum Width at 691 all widgets will display in a row. At 690 you will have two widgets on the top and one below. A value between 800-1000 pixels, therefore, gives a nice spacing at all times.

Conclusion

Content Maximum Width is a very handy tool to use if you find that objects in the Responsive Row widget are spaced too widely apart when viewed on desktop and laptop computers.

Video Walkthrough

You can also follow the above steps in our Content Maximum Width video on YouTube!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw