Mysteries of responsivity

Need help Responsiveness
1

So I have been struggling with Responsiveness for a while.

I even tried developing a template that uses 328px x 660px wide Groups as Mobile friendly “panels”. The idea was that as the page width reduced towards mobile size the mobile screen panels would gracefully shift from horizontal to vertical alignment because the panels would not overlap. It worked reasonably well.
it’s here: https://bubble.io/page?name=index&id=readnz&tab=tabs-1

But I came to the conclusion it wouldn’t work for everything and went back to a more standard site design.The problem is there are places on my new design where I want to use the same trick

But for some completely unfathomable reason the panels on this page do overlap
and I am damned if I can see any difference in their settings, or to the page settings.

I tried taking out the background image but it made no difference.
For some reason on readnz2 the page itself doesn’t go vertical as its squeezed and I can’t find the control to make it work.

any hints gratefully received,

1 Like
2

Can you change the settings of your app to “Everyone can view”? (Settings > General > Application Rights). At current, it’s set to private.

(Edit: first link is set to private, second link is visible).

3

It looks like your 3 main groups are all left aligned and the margin is 0 on the left most group. So, if you set them to be, say, centered it should work better.

Note - In responsive mode, there’s a button on the left that says “Explain Box Margins” which is extremely helpful in understanding why elements are moving the way they’re moving. So, simply look at that at full width and then shrink it down and look at it again. See what’s changed.

Hope this helps.

1 Like
4

done, sorry about that.

5

Thanks sridharan, i tried that but no real difference. The real problem is why one set of groups overlap and the other won’t. I honestly can’t see what I’ve done in the first one (I’ve opened now) that I haven’t done in the first.

6

Did you look at the “Explain Box Margins” and experiment with different settings to see how that changes the explanations? …this is usually the key to understanding why a page works the way it does.

7

To increase the margin, do you add an empty group with minimum width set to zero or is therr any other method?

8

I have used explain box margins and it is telling me the it’s squeezing my element because the right margin was “originally” 630px (It used to be fixed width I guess) How do I change this margin?