How to Set Up Your Listing Views on the Inistate App & Tablet

Mobile
1

Hello, Inistate Community! :wave: Want to make sure your listings look stunning on both mobile and tablet devices? Here’s a quick guide to setting up your listing views for various screen sizes and orientations (S, M, L) in both portrait and landscape modes. :star2:

Goal:
Guide Workspace Owners on how to configure listing views for various screen sizes (S, M, L) on mobile and tablet (iPad), in both portrait and landscape orientations.

Description:
Creating a seamless and visually appealing experience across devices is essential. Inistate allows Workspace Owners to customize listing views for different screen sizes (S, M, L) and orientations on both mobile and tablet platforms. This guide walks you through setting up listing views in Details View and Grid View, specifically for smartphones and iPads.

Prerequisite: Enable Design Mode (available for role Workspace Owner ONLY)

May refer how to enable Design Mode here :arrow_down:

:iphone: Mobile View Settings

  1. Details View (S, M, L)
  • Check out the Mobile details view gif to see how your listing looks in the details view on mobile.
  • Make sure to adjust the sizing for each option (S, M, L) to ensure the content fits beautifully on smaller screens.
  • :straight_ruler: Tip: Use smaller text and images for the “S” size, medium-sized elements for “M,” and slightly larger elements for “L” to optimize the experience.

Mobile details view gif
1

  1. Grid View (S, M, L)
  • Refer to 2.gif for the grid view layout.
  • Keep in mind that “S” is perfect for compact grids with minimal content, while “L” provides a more spacious look.
  • :mag: Tip: Choose grid settings that allow users to easily browse and find items.

Mobile grid view gif
10102-ezgif.com-video-to-gif-converter (2)

:computer: iPad View Settings

  1. Grid View (S, M, L)
  • Watch iPad grid view gif for a preview of the grid view on the iPad.
  • With a larger screen, you can take advantage of more space by showing extra information or larger images.
  • :triangular_ruler: Tip: When switching between portrait and landscape, ensure the content remains well-organized and aesthetically pleasing.

iPad grid view gif
3

  1. Details View (S, M, L)
  • The iPad details view gif shows the iPad details view.
  • Make sure to tweak the layout for different screen sizes (S, M, L) and orientations, so your listings are accessible and visually appealing.
  • :arrows_counterclockwise: Tip: Use dynamic resizing features to adjust the content seamlessly between portrait and landscape modes.

iPad details view gif
LAST

1 Like