Good guides on how to use styling

I am really impressed by the way backend infra and different workflows work so correctly even though they are so complex and detailed.

However, at the same time I am seriously underwhelmed with what I see in the Styling department.

That’s a mild way to put it actually. I am going insane.

The actual UI doesn’t ever look like what it shows in editor. Width, X position, Y position, alignment, etc. all are different when it renders as to what is in the editor. Bubble adds some width, height, x offset etc. by itself and there is no way to figure out why did it do that. There is no way to fix those either.

I would have width of 200px. In Bubble “Inspect”, it will show the same, but in Chrome inspect it would be 250. Similarly for x offset. It’s just bizzare.

Often I just do hit and trial and make changes to my editor version to make the rendered version fine, even though editor version looks absurd.

However, sometimes it is just not possible to do so, especially when you are using groups, reusable elements etc.

Is there some better guide available on how to go about styling the pages? What appears to be intuitive from the interface doesn’t work at all.

I haven’t experienced anything like what you are mentioning, are you sure the screen isn’t just resizing based on browser width?

I don’t know if that is what is happening.

Here’s a screenshot of how I have done things in my editor, and how it actually shows up.

Editor:

Rendition

I can’t quite tell what is going on in the repeating group though it does look like a responsive issue the rest of the issues you are experiencing are due to not accounting for the outputs it seems. I would recomendable placing the final content into layout to see how it will actually look before inputting the dynamic data. I can assure you this isn’t normal nothing I layout looks any different in the live site once all the unpredictable are accounted for

Why your group with “you can also … Post A need” is bigger than width of your page?

I had a lot of those as static content earlier. But then I had to optimise my work so that in case a phone number or image changes, I don’t have to make changes everywhere, so I went for dynamic texts etc. However, the issues existed even before that.

Also, I am building a repeating group to have some content that I am querying DB with. It would be quite a lot of work to first create a static version of it and then create a dynamic. And it would be total rework, as I won’t be able to just replace static content with repeatable group.

And if repeatable group is going to bail out on layout anyway, why bother with static first?

How do I proceed? The reason I am using Bubble and not any other static content website builder is that I have dynamic content. So I definitely need something that can handle dynamic content. I understand when data is going out of bounds etc. But that is not the case here.

If you would like I can give you a walkthrough of repeating group. But trust me, I have tried various things there. Grouping things into one, separating them, trying out ‘responsive’ tab etc. Just something or other keeps breaking.

Funny thing. The “you can also…” group is 1200 px. Page and the header are of same size.

But I had to move the last box in that group (the one with whatsapp logo) far right, and almost half way of the bounds, to make it appear how it is appearing in output I showed)

It should not be this way. Everything supposed to be within your page width. Send us you editor link(make sure it general->every one can view).

How do I do that? I went to the “General” and set it to “everyone can view”.

But I don’t see a link that I can share.

Does this link work for you?

Okay first of all you should choose what you will do:
App in resolutions for every major desctop: 1366px,1440px,1600px,1920px
or for only one width 1200 px which will appear with blank white strips around your content.

The first option is complex and you’d better have a ready-made design for that resolution.

The second option is much easier and fits you much better.

Make sure your whole page is NOT fixed width

Than group B G D in one group without background - make it fixed width, center it vertically.

Make sure that they have similiar distance from each other and from both ends of the page.

Thanks for having a look at my app.

Yes, second option that you mentioned for resolution, sounds good for now. Would it still take care of mobile web though?

Index page is already not “fixed width”? Here’s how it looks right now.
Screenshot 2020-05-11 at 9.17.04 PM

Your suggestion of “Putting group having B G D groups in centre with fixed width” worked very well. It shows up nicely now. But will having fixed width mean that it would not work in mobile?

Yes it’s not fixed width.

There is option in bubble:

You can make mobile version for each page and if user using mobile he will see your mobile version. It’s easier than make responsible pages.

Thanks.

Is there a good documentation of these various concepts of using styles? I am still struggling with many elements in the site.

You have kindly helped with couple of them. But I have a long way to go.

I just do hit and trial and make changes to my editor version to make the rendered version fine, even though editor version looks absurd.

Any suggestion ?

Have you watched any of the training videos?

This topic was automatically closed after 70 days. New replies are no longer allowed.