Hey Bubblers!
I have an element that I’ve hidden but it still takes up space when I view the responsive editor. I’ve hidden based on page size, collapsed when hidden and even adding a hiding rule in the responsive editor but there’s still a gap in the UI. It’s 3 columns on desktop that should stack when viewed on mobile.
Can anyone see what I might be missing?
Try making it not visible on page load and add another conditional to make it visible when page width is greater than 400
try it but put back the page width is less than 400 to be not visible so you have both visible at greater than 400 and not visible at less than 400 and one of them should be equal to so it is either visible or not at 400
sometimes responsiveness with collapse height gets messed up if the element is set to visible on page load.
another thing that could affect hiding rules is if the container element (parent) is set to fixed width but from your video it looks like it is not
I recently had to submit 3 bug reports for one page, all different issues, but all related to responsiveness, and all 3 Bubble acknowledge as a bug and ‘are investigating’
This seems like it may be worthy of a bug report
When I delete the two elements in that column or overlap them the extra space goes away.
I’ll submit a bug report. Thanks for your help! I thought I was going a little crazy.
If these overlap each other that is the reason for the issue. Any overlapping elements cause issues with all responsiveness settings.
See video above - they don’t overlap.
The blue outline border of the group looks like it is behind the group with ‘followers’ and ‘following’ as well as the group with the round image element; where are those elements normally?
This picture looks like it is the same group, but not exactly the same…almost like this is the desktop version and the first image is the mobile version beause of the fact that the circular image element is larger in this one than in the first and is centered instead of left aligned.
From your video I don’t see two groups with the ‘followers’ and ‘following’ elements plus a circular image element.
From the video in the design tab I do not see an element that looks exactly like the one in the responsive tab, and this leads me to believe there are two groups, one for desktop and one for mobile that you have overlapping each other.
Of course, I don’t have access to your editor to verify this, I only have the video to go by.
Am I missing something?
Ahhh I see what you’re saying. Yes that’s how it’s set up. The bigger version is for desktop while the smaller ones are shown on mobile only.
Even though they’re hidden (mobile vs desktop) they will cause an issue?
When they overlap each other, yes they cause an issue.
Need to stack them, so the bottom of one touches the top of the other.
How did you get on with your issue? Did you get it fixed?
Hey! Support said there was an issue with one of the groups not collapsing so they recommended I group it with another to get it to get it to collapse. It worked!
