Bug: Column stacking on mobile does not apply correctly

[khalil.io]

Are you using our SaaS platform (Baserow.io) or self-hosting Baserow?

SaaS

What are the exact steps to reproduce this issue?

The column stacking does not apply on mobile. The interface appears juxtaposed between elements and becomes unusable for the user.

1. Add a Container element.
2. Inside it, add a Columns element and configure the column stacking for mobile and tablet as Stacked.
3. Add elements inside.
4. Publish the application.
5. The stacking does not apply for mobile.

Important:

• Tests were performed from mobile apps on Android such as Firefox and Brave.
• In PC developer mode it does work correctly.

Screenshot:

[jrmi]

Hey @khalil.io

Thanks for reporting. It’s indeed a bug. We are working on a fix.

[khalil.io]

Thank you very much @jrmi and the Baserow team, now everything works fine!

[khalil.io]

Update:

Hi @jrmi,

It hasn’t been completely resolved yet. It doesn’t detect the screen size properly — on smaller screens there are issues.

The application structure is as follows:

• Multi-page header > Container > 3 Columns (Image | Text+Menu | Container)
• Container > Text > 2 Columns (Container | Container)
• Multi-page footer > 3 columns (Image | Text | Text)

We tested on two devices and the results are as follows:

Pixel 7 Pro

• Screenshot size: 864x1872 px.
• Screen size: 6.7 inches (diagonal), with a resolution of 1440 x 3120 pixels
• Displays correctly

Pixel 9 Pro

• Screenshot size: 768x1713 px.
• Screen size: 6.34 inches (diagonal), with a resolution of 1,280 x 2,856 pixels
• Displays incorrectly as if it were Desktop.

Desktop View

Notes:

• Browser cache was cleared and the application was republished.
• In the app’s Preview mode, the mobile device view works correctly.

[jrmi]

It might be related to differences in screen pixel density but we are investigating to figure out the issue.

[khalil.io]

To complement the information:

Pixel 7 Pro:

• 512 ppi
• Aspect ratio: 19.5:9

Pixel 9 Pro:

• 495 ppi
• Aspect ratio: 20:9

[jrmi]

After some investigations, it appears that the pixel 9 Pro has a viewport width of 427x952 according to Google Pixel 9 Pro viewport size, resolution, PPI, screen specs and CSS media queries | YesViz.

Unfortunately, this device is 7 pixels wider than the current mobile breakpoint, so the layout does not switch to the stacked mobile view.

It appears that the existing mobile breakpoint is now slightly too low for the current device market. As a temporary measure (in the next update), we will increase it slightly to improve compatibility while avoiding regressions for websites that depend on the current breakpoint.

The long-term solution is to support user-defined breakpoints and introduce updated default breakpoints that better reflect the current device landscape.

[khalil.io]

Thank you very much @jrmi, I’ll be keeping an eye out for this update.

Just as additional information:

1. Before the last update, the breakpoint was working correctly on the Pixel 9 Pro.
2. I’m attaching a screenshot of Webstudio’s default breakpoints (for mobile it’s: ≤479 px), which also includes the visualization of the long-term solution support.

Best regards!