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 in the top left-hand corner of a section to set how many columns you want to display in that section.

2475.gif

Once you have saved your section settings, you can then add content widgets into each column.

This method of stacking Sections with multiple Columns with 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 for the next section have four buttons side by side by using a four-column layout, 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 may not 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 on screens of different resolution). For example, if there are four images of slightly different aspect ratios then the bottom of each column won't align, as shown below:

2477.gif

Enabling fluid widget sizing solves this, by altering the size of the content widgets in each column so that both columns align across the bottom, as shown below:

2478.gif

The fluid widget sizing setting works by resizing images, therefore it only works 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 widgets setting in the settings of each section:

2476.gif

You can also set fluid widgets to be turned on for all of your existing sections, or for any new sections you create on your site.

Navigate to Site Settings > Section/widget behaviour:

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 of your existing sections to use fluid resizing, or just make fluid resizing applied by default to any new sections that you create. You can still overwrite this command 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 in the shorter column(s) until they align with the taller column(s). Therefore, if you have one column that is tall and another column in the same section that is short, 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