Online Support Centre

Follow

Fluid widget sizing

Website pages are comprised of one or more SECTIONS that display across the width of a page. Each SECTION can be split into one or more COLUMNS. You can click the settings cog icon at the top left of a section to set how many columns you want to display in that section.

2475.gif

Once you have saved your section settings to set the number of columns, you can then add content widgets into each column.

This method of stacking SECTIONS with multiple COLUMNS with multiple CONTENT WIDGETS lets you build and organise your page content into almost any appearance you desire. For example, you could have a single marquee image running full width in a section at the top of your page, then four buttons side by side by using a 4-column layout for the next section, and so on.

One challenge with stacking content within columns that sit side by side is that although the content will align horizontally at the top of a section, it is not technically possible for it to perfectly align horizontally at the bottom of a section when the user changes the size of their browser window (or when different people view the site with screens of different resolution). For example, if there are four images of slightly different aspect ratios, the bottom of each column won't align, like this:

2477.gif

The setting for fluid widget sizing solves this by altering the size of the content widgets in each column so that both columns align across the bottom, like this:

2478.gif

The fluid sizing setting works by resizing images, so works only with SECTIONS that have widgets that use images, such as the:

  • Image widget
  • News Carousel widget
  • Photo Slideshow widget

You can turn on the fluid sizing setting in the settings for each section:

2476.gif

You can also set fluid sizing to be turned on for all your existing sections, or for any new sections you create in your site. Do this through the Site Settings > Section/widget behaviour menu item:

2481.gif

Tick the option to Automatically resize widgets to align with section height.

2479.gif

Now decide whether to update the settings for all your existing sections to use fluid resizing, or just apply fluid resizing by default to any new sections that you create in the future. You can still overwrite this value later for each of your sections individually if you wish.

2480.gif

NOTE: If you turn on fluid resizing for a section, then the system will zoom (expand) and crop the images residing in the shorter column(s) until they align with the taller column. Therefore, if you have one column that is very tall and another column in the same section that is much shorter, the zooming and cropping can result in pixelated or non-sensible images in the shorter section. Fluid resizing is best used when the total height of your columns within a section are already quite similar to one another, and you wish to make them perfectly aligned.

Was this article helpful?
0 out of 0 found this helpful

Comments