Hi, I'm new to Bubble and I built an app, the problem is I didn't do it right in terms of containers and all that, and now I can't make it responsive. How hard is it to do? And is there someone I can pay to fix it for me?

richer1.dev · 2025-02-13T20:24:52.094Z

Hi, I’m new to Bubble and I built an app, the problem is I didn’t do it right in terms of containers and all that, and now I can’t make it responsive.
How hard is it to do? And is there someone I can pay to fix it for me?

rpetribu · 2025-02-13T20:34:12.196Z

Once you get the hang of it, you’ll find that the “new” engine is wonderful for building layouts consistently.

Depending on the size of your app, this can be a real pain to do. But it needs to be done.

I bet someone here on the forum can give you a more detailed quote. Could you tell us a little more about your app? Maybe share a link, tell us the number of pages…

lotfihamza98 · 2025-02-13T21:06:43.687Z

Hello, welcome to Bubble!

Bubble’s responsive engine is actually a great and simple tool for building responsively . Here are a few tips I use in my own projects that might help you:

1- Container Layout: The page container layout is typically set to Column, meaning all content (subgroups) will be stacked vertically.

2- Group Layouts: When adding elements within groups, think about their arrangement. For example, if two buttons should appear side by side, use Row layout. If they should be stacked, use Column.

3- Spacing & Gaps: Use the Gap spacing feature instead of manually adding empty elements or margins. This ensures consistent spacing between elements within a group.

Screenshot 2025-02-13 at 9.53.45 PM648×458 22.4 KB

4- To optimize for different screen sizes (mobile, tablet, etc.), use conditionals to adjust properties like font size, margins, and padding dynamically.

Screenshot 2025-02-13 at 9.56.39 PM646×778 41 KB

5- Only use fixed widths/heights for elements that should not change with screen size (e.g., buttons). Other elements should have min/max width and height to adapt smoothly.

6- To ensure images look great across devices, store them in Option Sets and retrieve them dynamically using ‘Get an option’. Additionally, use the Imgx processing action for better rendering and optimization.

Let me know if any of these tips help! Feel free to ask any questions or even schedule a quick 30-minute call together to take a look at your app and assist you with its responsiveness

emmanueldigitals66 · 2025-02-19T22:23:05.565Z

Building a suitable responsive layout on bubble to suit all devices start from your page layout, container alignment, padding gap spacing and overall all conditional statement to respond to current user width.