Making an Exhibeo gallery reduce in height in proportion to its width when used in a responsive site
13th of March, 2015When you use an Exhibeo Import item in an inflow layout with a Width set to “Fixed %” you need to use very specific settings on the gallery’s container item so that the space below the gallery shrinks in height when the gallery reduces in width as the browser window gets narrower (or when the page is viewed at a narrower breakpoint).
When building your page in Freeway you can place an Exhibeo Import item inside a container item by double-clicking inside the container item, going to Insert>Action item, then choosing Exhibeo Import. If you then select the Exhibeo Import item, you need to give the item a Width of “Fixed %” in the Inspector’s Measurements panel then give it a width value of 100% so it always fills the width of its container.
After that, there are two ways to make the height of the gallery item (and its container) reduce in height automatically as the gallery item reduces in width when you make the browser window narrower (or when the page is viewed in a narrower breakpoint).
- Solution 1: You can set the Height of the Exhibeo Import item to Flexible and then select the item’s container item to Flexible. The main problem with doing this is that the height of the gallery item will collapse to just 12px, which means that you can’t see the Exhibeo gallery on the page unless you preview the page or preview the file in a browser.
- Solution 2: A better solution is to set the Height popup in the Inspector’s Measurements panel to Minimum % and then drag the center bottom handle of the Exhibeo Import item so it is sized within its container how you would like it to appear. The main benefit of using this solution is that you can see how the page is going to look before viewing it in a browser.
Both versions will work just as well as each other - but most people prefer to see the page design as a whole within the Freeway interface rather than needing to preview to see the result.