I often find it hard to get elements to function exactly as I’d like them to when my page is large, but my element is half the width but centered on the page.
When I want the element to maintain its width until the page is the same size, but then begin to decrease so the element maintains in center and doesn’t decrease it’s width when the page width is first less than its width in the editor.
For example. Page is 1200px. Centered group is 600px. If you are to allow the group to maintain center all the way to 300px and keep a margin, you have to allow the centered group to have a low percentage of minimum width…The problem with this is that as soon as the page is less than 1200px the centered group width begins to decrease.
What would be nice is if we could set (similar to a hiding rule) a page width rule for when the element can begin to decrease it’s width. For example, I could set a rule to only decrease the centered width when the page width is less than or equal to 640px so that at 640px page width, my centered group is still 600px, but by the time I get to page width 300px the centered group would be 260px.
Yeah, that’s actually a good idea. Maybe Bubble can add that feature. That would be cool.
In the mean time. One way to fix it… you can add groups as spacers to the sides of it, if possible. This will allow the group to shrink slower.
The responsive settings try to keep the margin on the left and right side when something is centered. So it shrinks as fast as you shrink the page. The spacers allow for a slower shrinking of the element.
@boston85719 the trick is to use spacers as @J805 said, remember bubble snaps to edges > it’s the magic sauce to bubble repo design - pinned to X. If your group is pinned it will slide with it.
***Additional
If your groups are just left floating mid-page, you’ll pull your hair out trying to juggle %'s. If they are holding onto something, the will behave.
As an added note, always ensure your groups stack into 12… the magic number in layouts.
That is what I ended up doing after posting this. One issue I have with that method besides it taking the time to put those extra spacer groups in is when I set to no background I usually forget they are present…another annoyance for me is I get too lazy to name them and then forgot what they are when viewing the element tree later in time.
But yes, that is the work around until bubble maybe implements something similar to the idea of a rule to place on the element.
I created the group element that I want to stay the same size. Then I place that group into a container group that spans the width of the page. Both of these groups have a fixed width…the elements inside the group I want to decrease width are not set to fixed width.
The main container group has left and right margins set to 20px, or whatever margins required. I set the color of the margins to transparent.
By the way, I pinged you because I took this concept of the margin from your posts on sliding the page elements when a side menu is displayed utilizing a large left margin in conditonals.
