Responsiveness based on zoom level

Hi,
Can someone please help me with the below?
This is with chrome at 110% zoom:

This is at 100% zoom:

90% zoom:

The layout changes as you change zoom levels but as I change my chrome window width, the elements stay in the same places. It is only the zoom level that causes changes in responsiveness.

Anyone have any experience with this?
Thanks,

1 Like

Hi @paul29 I’m having the same question. Did you ever figure out how to account for this?

I did but it was so long ago, I don’t remember what the settings were that I had at the time compared to what I have now. Basically, I just played around with the settings until I got the proper behaviour.
Currently this group is set to a fixed width in px:
image
Although, if I was to build this cart again now I would have almost certainly used a fixed with of percentages as I almost never use fixed with as pixel anymore

And a parent group is set to a max width of infinity

1 Like

Feel free to send some screenshots too of your relevant elements and property window and Ill help you

1 Like

Here’s what’s happening for me- it has to do with my menu when zoomed out. This is what zooming out does to the menu:

row_gap

I’m guessing I have to use a conditional on the page width but so far it’s not having an effect.

I’m not really sure what you’re trying to show in the gif. Is it that the menu starts to get cut off at the top and bottom as you zoom out? If not, can you give some more details please?

Certainly. In the gif, the more I zoom out, there becomes a large whitespace in between the icons like this:

I’m trying to adjust the conditional on the group containing these icons to prevent them from creating this whitespace.

Can you send a screenshot of the property editor window appearance tab. Make sure it is for the group that contains all the elements. This is not a conditional. This has to do with your settings on your groups. My guess is you just need to tick the “fit height to content”. Right now it seems that it is stretching to it’s max height.

I’m assuming you want all the icons, line and bottom icons to all remain tightly packed as in your most zoomed in level in the gif you sent, right?

1 Like

That did the trick. Now there will be some space under the icons but they remain grouped together. Thanks, @paul29!

NP. Not sure how much you’re trying to build in bubble but I would suggest looking up some tutorial videos on youtube to better understand how to build responsively. A bit of time up front but will save you a bunch of time for situations like this one where you are trying to tackle the wrong thing.

1 Like