How to Use the New Mobile Breakpoint (Portrait Mode)

  1. Overview
  2. Customizing and Branding Rooms
  3. How to Use the New Mobile Breakpoint (Portrait Mode)

Now you can design your room for phones too!
In addition to the classic desktop (landscape) layout, we’ve added a new way to customize your space in mobile portrait mode.

That means: yes, your room can look beautiful on phones - vertical and clean.

Let’s walk through it.

2. What’s a Breakpoint?

A breakpoint is just a fancy word for different screen layouts.
Right now, we support two:

  • Desktop: for laptops and monitors (landscape).

  • Mobile: for phones (portrait).

Each breakpoint has its own design, but the people in your room (we call them circles) stay the same.

3. How to Create a Mobile Layout

Here’s how to start editing in portrait mode:

  1. Join your room and take a seat.

  2. Click on This Room.

  3. Click on Background and Editor.

  4. At the top of the screen, you’ll see two icons:
    🖥️ Desktop and 📱 Mobile.

Now, here's the important part:

  • If you click the mobile icon, you’ll enter mobile editing.

  • This layout is separate from your desktop design.

  • You can move things around, change the background, and make it your own.

BUT…

The number of circles (people spots) must always match in both desktop and mobile. Otherwise, some people may not appear.

4. Matching Circle Count

If you add more circles while designing in mobile mode, don’t forget:

  • Click the desktop icon.

  • Add the same number of circles there too.

The system will first ask:

“Do you want to save the desktop version?”

  • If you didn’t make changes, you can skip it.

Then it will ask:

“Would you like to switch to the Responsive Mobile Editor?”

  • If you click Yes, your room now has two layouts - one for desktop and one for mobile.

⚠️ Keep in mind:
Once you go into mobile mode, you’re responsible for keeping both layouts updated if you make changes.

5. Saving and Syncing

When you switch between layouts:

  • You can have different circle numbers temporarily.

  • But if you click Save, the system will check and let you know if anything is off - like missing circles.

This keeps your room safe for everyone to see each other.

6. About the Default Mobile Layout

Before you customize, mobile rooms show:

  • A dark background

  • Avatars in a simple grid

If you want to go back to this clean default at any point:

  1. Click on This Room

  2. Go to Room Settings

  3. Check the box: Enable Portrait Minimal Mode

This won’t erase your custom mobile layout - it just hides it.

If you later want your custom layout back:

  • Uncheck Enable Portrait Minimal Mode, or

  • Go to the editor, click the 📱 mobile icon, and click Save
    (this will also uncheck the Minimal Room setting).

7. Portrait Background Tips

Inside the editor, if you’re using AI backgrounds, they’ll be generated in portrait mode.
If you’re uploading your own, use vertical dimensions.

Here are some good sizes to upload:

  • 1080 × 1920 (standard phone)

  • 1440 × 2560 (for higher resolution)

  • 720 × 1280 (lighter image)

8. Recap

  • You now have two design breakpoints: desktop and mobile.

  • Each layout is separate but shares the same people circles.

  • You can always go back to the default dark grid using Minimal Room.

  • Just remember to match circle counts and save carefully between views.

Got stuck? Let us know - we’re happy to help!
Now go ahead and make your room shine on every screen 📱🖥️

Was this article helpful?