Hi, I’ve faced an issue. I need my app to look like an iPhone when the page’s width > 667px. When it is =< 667px, I want elements to collapse their margins.
But it seems that I can’t achieve this with a fixed group. So I get the following result on wider screens:
How can I get the result I’ve described in the first paragraph?
Gotta play around a lot to truly understand the responsive editor and even then you usually (at least I do) still need to play around to find the effect you need for each new element.
Some things I learned recently from bubble support about collapse margins is that your element needs to not have fixed width…you can alway set a max width to be 100% so element doesn’t get wider than you want
For elements to hide using the hiding rule the parent group can not have a fixed width
In your case I’d say you need to think about what you are trying to achieve as it sounds not possible.
You want when the page width is greater than 667px for the element to look like an iPhone which is 375px or less, but when the page is less than or equal to 667px you want the element to be larger than an iPhone
I don’t think you could do that, however you could create two elements with one being the iPhone size and have it used with a hiding rule based on your page width greater than 667px and have second element on page that is as wide as the page and allow it to collapse as the page width collapses and have a hiding rule to show it when the page is less than or equal to 667px
That method means you don’t need to worry about collapse margins or trying to do something that is not possible of making an element on page smaller as the page is larger and larger as the page is smaller (at least I don’t think that is possible)
I was wondering about the method you suggested earlier, but refused it. It would slow the page.
@boston85719 is correct here. You just need 2 groups that are both hidden by default and have condition that shows them when the page width is the correct size. It won’t slow your page down because it’s only showing one group at a time.
