How Many Item Tiles Are Displayed in a Row?


Your Hub is responsive, so depending on the device a visitor is using to view your Hub, different numbers of Item Tiles will be displayed. Here's how many they'll see on devices with different screen sizes.


How Item Tile Responsiveness Works

Your Hub consists of Item Tiles, and since they're the primary way that your visitors will interact with your Hub content, it's important to understand how they are displayed on different devices.

Hubs are built to be responsive, which means that their design dynamically changes based on the screen size of the device used to view them. This is based around the concept of "breakpoints", which are specific screen widths at which the layout of a website changes to optimize for the available space.

In Uberflip, the breakpoints define how many Item Tiles are displayed side-by-side in a row: in general, the wider the screen, the more tiles are displayed in a row. Below, you can see where the breakpoints are located, and how many tiles are shown in each range.

Screen width (in pixels) is:

  • Under 561px: 1 tile
  • 561px to 860px: 2 tiles
  • 861px to 980px: 3 tiles (if no Highlight Tile) with top menu
  • 981px to 989px: 3 tiles (if no Highlight Tile) with left side menu
  • 990px to 1336px: 3 tiles with Highlight Tile
  • 1337px to 1606px: 4 tiles
  • 1607px to 1877px: 5 tiles
  • Over 1877px: 6 tiles

Keep in mind that the above breakpoints apply to default Hubs without Custom Code applied, and that using Custom Code can change this behavior.

0 out of 0 found this helpful