Optimizing bubble app on mobile

Hello, I have created my bubble app and designed the frontend on bubble and am getting ready to launch but I have only built and designed to look nice on desktop browser. How can I easily convert or re design to look nice on mobile browser? I was told to create a clone page and optimize that for mobile (380 width). Then go to the settings of my desktop page, and set the clone page to my mobile version. I feel as if this would create laggy servers with double workflows and was looking for a more efficient way.

Did you try responsive tab on the editor?
I think you can make the page responsive by changing its elements’ layout depending on the device size there.
And also use percentage where possible instead of px. Like width as percentage.

1 Like

when I use the responsive tab and make edits between mobile (320) and desktop (1200) it makes changes on both… how do I set it up so I can make changes to mobile without it affecting the design on desktop?

I am still not that much well covered with responsive design. Working and learning. You can check the Bubble manual and some youtube videos. Here is one link you can watch

1 Like

The responsive viewer just lets you view your page in the editor at the different sizes to see what needs fixing. On the conditions tab if your elements you can add conditions like “width less than or equal to 992” and then add properties to change widths, padding, margins, font, etc.

1 Like

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