This is likely a very basic query but I’ve been struggling for hours on it now. My existing site is built on Wordpress. When the user resizes the window the content collapses in and 3 blocks that were arranged horizontally (see first image below) change to being stacked horizontally (see second image below).
This does not happen in Bubble. Everything is fine when the window is full size (first image below), but if I make it narrower everything goes haywire (second image below).
To be fair, it is doing what you are telling it to do, which is when you go below a width that is smaller than 3 groups wide, put the next group on the next line.
1 fix would be to switch from the 3 wide repeating group to a single width one when current page width < minimum width of the 3 groups (ie when the change happens)
you can also mess around with the responsive tab.
It is common to transition to a more mobile friendly version when current page width < 600px
No Problem. Just group them together and fix the widths if you don’t want elements to change relative to each other. however what it is doing doesn’t necessarily look wrong. If you insist on having them on 1 line, make sure it can scale down to 300px and still work.
It depends on what the app is for. Personally, the web apps that I am developing at the moment will that will be used on a PC or tablet, So I I work at 1200px, as that is pretty much the minimum screen width of a laptop or desktop these days. But I always keep in mind that things need to respond down for a mobile screen so allow for rows of elements to stack up on a phone screen. It takes time to understand the best practices for responsive web apps, but the more you play with it, the more you understand it!