Responsive layout (beta)

@josh I just tested again and I’m not seeing the issue now. Looks like you may have corrected the issue.

3 Likes

But, not sure why the Main Content Area’s width is so small. I would expect it to take up most of the pink space.

Great! Though, that horizontal scrollbar on thes sidebar shouldn’t be there… will look into why that’s happening.

I fixed the width of the main content area – there was a max width set on it, which I just removed.

might help. Responsive rules are better explained here with some tips
https://bubble.io/chapter/building-responsive-pages-1460743187240x663465764401971200

alos, there is a very useful new feature https://bubble.io/reference#Elements.GeneralConcepts.Responsive.responsive_alignment

1 Like

There is a typing error in the documentation. Here it is in bold…

  1. Hiding rule
    You can set to hide an element is the screen width is below or above a
    certain number. In that case, the element will be hidden and won’t take
    space in the page any more.
1 Like

when will we be able to test the responsiveness in the Responsive Viewer of all the hidden elements (popup, focus group, hidden things, etc…) ?

2 Likes

It’s on the list, but not the most urgent thing since it can be done in run mode.

1 Like

I’ve found more glitches in responsive layout.
Here is a video showing what is happening…
Responsive layout glitches

1 Like

For applying changes to hidden elements (= not visible when page is loaded), we have to make them visible, then apply change in the Responsive Viewer, then make them not visible, and preview the page.
For accessing popup’ elements or focus group’ elements, I have to convert them into a group, then make the changes, and so on…
I lose a lot of time with this.

2 more things :

  • agree with @cakeheke about a toggle for swithing in repsonsive view in one click would be nice
  • can you add something so we can close the window for accessing elements below please ?
1 Like

Yeah, for sure. Something to close that box is definitely needed.

Yes we’re aware on the issue with repeating group. Looking into it these days.

2 Likes

Having a problem with floating groups, trying to create a floating sidebar + header menu

When a Floating Group is converted to a Reusable element and the Responsive function has been enabled, all the elements within the floating group disappear when you preview the reusable element on a page or view it in responsive viewer.

I’ve recreated it in the forum app above.

The elements inside the Floating Group don’t disappear unless I convert it into a reusable element. However in the Responsive Viewer, I can’t add hiding rules to the floating group unless I convert it into a reusable element.

@josh @emmanuel are there any plans to make text resize per breakpoint? If so, can we set the text size on our own?

Cheers!

1 Like

You can use the conditional tab and use the screen width as a condition.

did you figure out a way to do this?

Hi @emmanuel and Bubble Team,
I’m the designer for Clevrnet. First of all: thanks so much for this feature, we were all looking forward to it! I’m just wondering, so that we can best allocate our resources and workload: when will the feature be ready and live for everyone?

Feature idea for responsive:
Text elements : Automatically reduce font size to fit dimensions
@emmanuel
This is is a major pain right now. Using conditional formatting for different current page widths is not really easy.

Yes we’re thinking about this. It’s a bit tricky to find the right formula though, still need to experiment. If you use styles it shouldn’t be too bad though, just need to set it there.