In responsive websites, the site layout is designed to resize to fit the browser, regardless of size. Usually, the width and height of items in your layout will be sized automatically, based on the items inside them, growing as wide or tall as needed. Some customization options in the ProPhoto Visual Builder give you additional control over the sizing of certain layout items, allowing you to achieve a particular look.
Width of layout items
Padding
The primary way to adjust the width of site layout items is by using padding control. For example, adding 2% left/right padding to a block will reduce the width of all rows appearing inside to 96% the site width. Or, adding 2% left/right padding to a row will reduce the width of that row's columns. To edit padding, click to modify the block and use the options in the Appearance tab:
(You can edit row or column padding by selecting them at the top of the customization panel.) By adjusting the padding of these layout elements (blocks, rows and columns), you can control the relative size of the items within. In the example video above, adjusting the right & left padding of the main block will reduce the width of the row found within.
Row Max width
Aside from padding control, you also have max width control for rows. The width of rows is usually automatic, resizing as wide as possible to fill its parent block item. However, using the max width control, you can set a limit for a row's width. This is done by editing a row's appearance settings.
By limiting the max width of a row, it will adjust to fill the block until it reaches the limit, and then will stop getting wider. This can be helpful when you want to, for example, limit the width of your page/post content area so it doesn't become too wide on large screens.
Height of layout items
Block height controls
Auto height
The height of each block in your layout is usually automatic, with each part resizing as tall as necessary to fit the height of everything inside. This will be the sum of the height of all modules, as well as top/bottom padding set at the column, row and block level.
Full window height
When you select full window height for a block, then it will display at least the height of the web browser window (or, screen height on mobile devices). This is a great way to create a full-window section of your layout, like the top of your layout used on your front page. For example, the Atlas design utilizes this feature on the home page:
The full window height setting is responsive, and will change the height of the area to match the height of the browser, so consider how the height might vary for users - like when they rotate a mobile phone between portrait and landscape orientation. When setting a block to full window height, ProPhoto also provides a vertical alignment option for rows that are contained inside of that block. That way, for example, you can control where text widgets inside of a full window height block are displayed on the screen.
Comments
0 comments
Article is closed for comments.