Here are the layouts after modifying the properties values in iPad and Mobile device view.
The most important aspect of Fluid Boxes is wrapped. On smaller devices, it controls when and how the objects wrap to the next row.
Wrap to next row: Whenever the wrap point reaches its maximum and can no longer keep any of the objects in the same row, the last object in the Fluid Box is moved to the next row. This movement occurs in a proper sequence, with the objects being moved one-by-one to the next row.
Squeeze in a row: This choice is useful if you want the objects to remain in the same row instead of moving them to the next row.
One Row/Column: The whole property compacts the objects into a single row or column. When the wrap point exceeds the mark, the objects are vertically aligned instead of horizontally.
Symmetrical: Instead of moving one object at a time, this feature moves a group of objects to the next row, keeping an equal number of objects in each row.
Alignments: You can use this property to monitor how the objects in the Fluid Boxes are aligned. Uncheck the “Stretch to Match” choices for both Horizontal and Vertical alignment properties to see the alignment settings.
Left: Left-align the objects in the Fluid Box.
Right: Right-align the objects.
Center: Center-align the objects.
Space in between This property allows the objects to be evenly distributed inside the Fluid Box.
Space around: The objects are evenly distributed in the Fluid Box with equal space around the objects.
Top: Top-align the objects in the Fluid Box.
Bottom: Bottom-align the objects.
Middle: Middle-align the objects.
Static Fluid Boxes:
If you want to put overlay objects within a Fluid Box, you can convert it to a Static Fluid Box. Instead of putting the objects side-by-side, you can position them on top of each other, or completely overlapped on each other by using this property.
Optional Fluid Boxes:
If you’re going to squeeze a couple of items into a row or column, label the less important ones as optional, and they’ll disappear on smaller screens.
Click here to view a sample responsive eLearning course.