Responsive : top margin issue

Hello

I believed I understood how to make my web app responsive, but to be honest may be there is a missunderstood.

When page’s width is 1200 px, it looks like this :

When page’s width is 375 px, it looks like this :

Why this space (in red) is that tall ?

I believed I will have only 5 px top margin between my two texts elements.

Thank you

If you look at the 1200px desktop image and look at the top margin above that text you can see that all it is doing is ‘correctly’ preserving the top margin above the Search for Affairess’s text in that middle ‘column’ (which then moves below the left column in a smaller viewport).

You can test this by temporarily moving Search for Affairess to the ‘top of its column’ and then checking responsiveness - you should see now the smaller top margin between them after it has moved below the other text.

My solution in general for responsiveness is what many Bubblers before me have all decided is best practice and probably what Bubble themselves would recommend: Build one view for mobile and another for desktop. Choose one or the other for iPad depending on your app design.
You can do this using the ‘when page is loaded’ workflow to send user to the one page mobile application depending on their current page width. If you are concerned about having separate workflows you can rely more heavily on reusable elements.

This gives you a lot more freedom in truly designing properly for mobile by putting in best practice mobile standards in mobile view and the same for web standards for desktop view.

While there are hack solutions to the above problem (eg. putting your Affairess text in a group and putting a hidden group above it that collapses and hides at a certain page width, I’m sure there’s an easier way btw), this will only lead to messy rules not only in the editor but also over on the responsive tab which everyone forgets about as it’s hidden away. Plus it’s slower and more painful.

Lastly, it is usually easier to have more of a ‘card’ mentality where many design elements are ‘card-like’ to make your design process easier.

Awesome !

Thank you very much for your advices.

For sure I will choose the workflow solution.

Thank you @cowontherun