Hi:
Has anyone noticed that the responsive engine shows something different from what actually appears?
In responsive view:
In a phone:
I’m trying to figure out - is this a bug or such?
Yes, the responsiveness engine is mainly there to tell your elements how to behave based on the screen size, but each actual browser will render things differently.
Responsiveness sometimes becomes a game of trial and error - by testing it on various browsers on various devices. it really helps to know the device types (mobile/tablet/pc) and browsers that the majority of your users access your bubble app from and then design+test for those first.
Tools like browserstack.com will help emulate the app on various browsers and devices to see how it behaves.
Cheers,
Ranjit | Founder, Blur Apps
Hi Ranjit:
Thanks for the feedback.
Responsiveness can be maddening, so I appreciate the input.
I’ve a search filter functionality and I need the filters to be at least readable; I’m finding that this is difficult to keep consistent across browsers.
Try playing with the min width values of the elements inside the parent group. Also make sure that the max width values are the same for the parent and child elements (this helps when the user opens it on a larger screen than what you designed for).
Also create groups depending n how you’d like the elements to stack and make their vertical edges touch.
These should take care of most issues that you see.
All very helpful and super useful. 
Would have saved me hours when I just started out.
This instance of the responsiveness not working as desired was due to overlapping groups.
I’m doing filters that appear or disappear as needed and I needed the overlap. I couldn’t use group focus due to the fact that it didn’t resize, and I didn’t want to stack because I didn’t want the groups to be pushed down. It’s soooo much more tricky when groups overlap.
There are still some predictable behaviors but for the most part, overlapping groups are really tough.
I super appreciate the input.
1 Like