Responsive layout (beta)

When a group’s width is 600 px in a full width page of 1200 px, it should continue to maintain 50% width of page when the actual screen is wider than 1200 px if a page is responsive is it ?

Yes, as shown here https://forum_app2.bubbleapps.io/version-test/responsive?debug_mode=true

except of course if you have a min or a max width

it doesnt seem to display that way for me. Even in the link u just posted. What’s wrong here ?

Can you record a screencast and change the size?

How do i record a screencast ?

Meanwhile -
150% zoom

50% zoom

2 Likes

@emmanuel here’s the screencast

Was there major changes made yesterday to responsive?
This morning my apps are all messed up with the layouts. Everything is squashed up in the top left corners

Editor view

Preview page

Preview page

Editor view

I’ve send a mail to support

We made that reusable elements can be resized. So what happening here is that you should resize them in the context of the page. Once you’ve done that you’ll be all set.

1 Like

Does that happen when you resize the window? I can’t really see the actual window resizing in the video.

Pitty I didn’t know it when I started out this morning. This is where time differences between countries becomes a real bummer :sob:

Nice feature though. Is there no way that we as developers can be informed of changes that were / going to made so that we know what to look out for? It will solve a lot of guessing work on our side.

This is really because we’re iterating on the responsive engine. Usually we don’t do that, but since people don’t use it in prod yet, we think it’s “okay” to do this to speed up development process. As soon as we’re done (and we’re close now), that won’t happen again (and it doesn’t happen for other feature development).

5 Likes

Just picked up a problem with my login / signup popup. First time since the changes I’ve used it.
If I click away from it it does not go away and it doesn’t give me the blacked out area.

I’ll mail you a link, I cant put the link on the forum. I’m still busy checking to see if I can find something

I’m trying to make a page responsive. So in the full width mode this is what i have

however on my iphone, the left blocks get cropped from left and are not centered while the right blocks are centered and appear in full. Here are 2 screenshots (the size, setting etc for all the blocks are the same)


Please help me out how to align the blocks so that they are all centered. Here is the link to the editor (private app)

I’ve tried to open your link but it doesn’t work.
It will most probably be one of the settings, how the elements have been placed in groups, min sizes.

Will be nice if you can re post the link.

You need to go group of elements by group of elements. For instance, your header isn’t adapted to look good on mobile yet.

Also, if you have elements that overlap, they’ll be moving together, which is probably not what you want. For instance, see this

As you can see your logo is on the same horizontal as the header, so they’ll move together.

When using responsive, it’s important to have a clean design and to group elements to have different areas on the screen (right click for this).

These elements should probably be grouped for instance.

Why don’t you have a second pass with that in mind and let us know how it goes (and it’d be great for the community to open a version of the app).

3 Likes

@emmanuel
I have implemented your recommendations. But it’s still not rendering well. Please see the screenshots below. What i don’t understand why the elements get cropped from left or right while there is plenty of space? For instance:

  1. Bubble logo and “start building button” in the header (first screenshot)
  2. bubblewits logo below the header on the right side (it’s a reusable element and it is set to a fixed width) - first screenshot
  3. “b” logo and the text below (first screenshot)
    4.main blocks (Second screenshot)
    and I have created a public copy as per your recommendations. Here it is
    https://bubble.io/page?name=index&id=iamcopy&tab=tabs-1

@raymond this the public copy, will appreciate your help too. Thanks


@levon Some food for thought. I’ve added an index -2 to your app and created a header-2 with a few different settings (not many).
a. I’ve right clicked on header-2 and made sure it’s center to the parent
b. In index-2 I’ve placed the new header, right clicked on it and made sure it’s center to the parent. This makes a difference when page is stretched. See the red container in which I placed the new header.
c. I noticed you placed the entire page in a group. Was this so that everything is seen above the shapes with images?
d. I’ve placed a container that has the background image. Can stretch the full width
e. Placed another container inside the background container to hold the contents.
f. Placed BubbleWits logo on the contents container and set it to fixed width. Reusable elements must now be set on page level as well.

Have a look to see how differently your page reacts. Something to remember is that elements overlapping each other will move together. You’ve got a lot of groups and shapes overlapping. Responsive design takes a bit of a different mindset when designing your page.

Use the principals of what’s in index-2 and take it further and see how you can improve your page. Don’t give up, I’m learning something new every time a place an element on a page.

1 Like

@raymond Thanks a lot!
I’ve tried to center the header to the parent - but it didn’t change anything.
the entire page is in the group to keep the elements centered otherwise they get pulled to the sides of the screen when it’s wide - and with the group i simply set a limit to the maximum width of 100% from current width - this way they stay together
thanks for the bubblewits logo - i didn’t know that now it should be set at the page level too. But when i try to edit the header’s properties i see a message that I need to manage them on the reusable element’s page
I’m afraid that the main page’s group has to overlap with the header for the design reasons.
You are right - it needs a different mindset which I’m currently lacking :slight_smile: Feel free to change the index page itself - it’s a copy anyway, i will then apply the same edits in the main app.
Again, thanks a lot for your help!!

You should really not have elements overlap, otherwise the algorithm will get a bit crazy. Or, if they have to, then you should put them in an outer container.

2 Likes