How do I hide an element and collapse it's width?

I have a condition set on this group so that when the page is below 500px it should not be visible.

It disappears but the box it was in remains, taking up space. How do I handle this?
I need the box to disappear display:none.

image

Hi there, @bubbler63… do you have this box checked on the group?

Best…
Mike

1 Like

Hey Mike,

I have it checked on the parent group:

image
Do I need to put the search field in a group on it’s own?

Is that search box in the group? That looks different than the screenshot you have in your first post.

The first screenshot was in the responsive editor, the second one is in the designer. and Yes the search box is in the group.
What i’m doing is trying to scale this:

down to this:

image

But I can’t get rid of the spacing on the right of the Logo

Ug, my bad… I missed it in the title of the post that you are trying to collapse the width, and that wasn’t necessarily clear (to me, at least) in the initial post. That being said, I almost never respond to responsiveness-related posts because I always figure that kind of stuff out via trial and error… so, without trying to recreate exactly what you are trying to do, I don’t have an answer… sorry about that.

Hi @Melior_Devteam unfortunately the actual responsive engine does not allow a “width collapse” when an element is hidden. How I have managed to do this is to create 2 elements, one for PC screen and another one for narrow (phone like) screens. This way, when the screen is below 500px, hide the large group (logo + search box) and show the new smaller group that contains only the logo.

2 Likes

No problem @mikeloc I honestly wanna just thank you for even taking time out your day to try to help me, I really appreciate it.

1 Like

Thanks didn’t wanna have to do this because it just seems to incorrect but if that’s how I need to do it then I will! Thank you.

Definitely! it’s not the best solution, but then again, bubbles’ responsive engine is VERY limited in that sense, so, at the moment, it’s the only solution. Good news is that we should be getting the new responsive engine by the end of october based on flexbox, which in theory should solve this! :slight_smile:

I don’t know if to believe this because from what I understand Bubble tend to promise things and not deliver. I was looking at videos from last year where Flexbox was promised by October of 2020 but I sure hope it comes!