I’ve started work on a web app and have been running into problems when trying to get it to work with mobile. As an example, I have popup that–on desktop–displays an image on the left and some editable information about it on the right. Since desktop screens are so large it makes sense to have all this visible at once. On the other hand, with mobile these elements should be aligned vertically instead (image first, information below it). I’m trying to use CSS, but–due to how Bubble structures the pages (everything in “bubble-r-box” divs that can’t have an ID set)–I’m not sure it’s even possible to change the positioning of these elements. There are other similar problems I’ve run into, too.
So: how do you all go about creating web apps on Bubble that work for both desktop and mobile? I’m getting close to scrapping my use of Bubble altogether.
I addressed this by developing for desktop first, getting all the features to work and then going back to do the mobile separately. I just couldn’t make enough progress trying to get the app functionality and responsive to work simultaneously. This is just my POV and I know there are many who advocate to build responsive as you go.
I know it’s frustrating when it comes to responsiveness. I recommend setting the page width to 1200. Then splitting things up evenly. So if there are three elements in a row you would have 3x400pxl elements. If there are two elements it would be 2x600pxl elements. If it were one then just a large 1200pxl element. Or even a 1x400 and 1x800 should work side by side too. Try to not overlap elements and if you want something to stick together, put the two elements in a group.
If you would like to learn more you can visit my site at www.NoCodeMinute.com for more help. We have one-on-one tutoring, video tutorials and a Members Only eLearning Hub where you can make requests and get custom tutorials made.
,