Responsive Behavior of Widgets/Layouts

The Open Berkeley design is "responsive". This means that when you choose a certain layout for a page and add widgets to different regions within the layout, the widgets will follow a different flow based on the width of the device where they're being viewed (e.g., desktop, mobile, or tablet devices).

About Responsive Behavior of Widgets and Layouts

There are many available layouts when individual pages are customized, and depending on which layout is chosen and how many widgets are used on a page, the widgets will "stack" on smaller displays/mobile devices. See Figure 1, below, for an example of how widgets may stack on smaller mobile devices.

Figure 1: Widgets stacked in one column on smaller mobile displays

How Widgets Stack on Smaller Displays

  • The mobile stacking logic is based on the order of the available rows in the layout, and after that, the columns within each row.
  • At the narrowest mobile width, everything will collapse to a single column.
  • The page will display the first row first. Each column within the first row will display in order from left to right.
  • The preview thumbnails for each layout should help you figure out how the layout will be displayed.

There are variations on the above when there are columns that span more than one row. For example, in layouts where there is a full-height sidebar that spans multiple rows of content, everything in the sidebar will display as a unit. If the sidebar is on the left, the entire content of the sidebar will display before other items in its row, and subsequent rows that it spans. If the sidebar is on the right, everything in it will display after other content in its row, but before the content of other rows that it spans.