Building for mobile: Part 2

How to optimize your Bubble.io page heights for mobile screens: Part 2: Make it even nicer using CSS media queries and CSS calc().

In today's issue:

1. Building for mobile: Part 2

2. bubbleHacker of the week: Neil Pierce

Enjoy 🤞

Building for mobile: Part 2

Since we don't know what Bubble means when they say that their new responsive engine will be available to the public soon, let's further optimize our Bubble apps for mobile screens. This tutorial includes vertically centering elements as well as mimicking Bubble's floating group behavior for regular Bubble groups and elements:

Feel free to check out my editor setup and copy and paste the code to your project.

bubbleHacker of the week: Neil Pierce

I want to make this a standing segment of my newsletter, and I am honored, Neil Pierce has agreed to by my second guest 🙏

Who are you?

I'm Neil Pierce. I'm a CIO by day and a NoCode Visual Developer by night. I've been married for 17 years to my wonderful wife Kandle, and I have one beautiful 13-year-old daughter Kennedy. I spend most of my time with my family when I'm not solving technical problems at my day job or building side projects with NoCode. I've been doing visual development for roughly six years now and enjoy building on Bubble.io with some Low-code involved.

What are you building?

I'm currently building SpaceDesk.io, a NoCode Aggregation Engine that pulls in a wide variety of NoCode content like jobs, articles, tutorials, blog posts, newsletter issues, etc. The goal is to save time for those wanting to stay up to date in one place with the rapidly growing industry of NoCode.

I'm also kicking off a new side project to build a massive UI Kit for Bubble visual developers. This project will distribute tons of components that can be copied and pasted from a template into your project to speed up software development.

What is your most significant learning from this project?

I've learned from my SpaceDesk project to slow down a little bit and not launch too many features at once. I've also found that distribution and execution are what matters rather than a feature-bloated solution. There are so many features I want to add to SpaceDesk; however, I need to try and focus more on "nailing" the current features and focus on the value proposition that the solution can bring to end-users. I typically try to do too many things simultaneously and need to be better at iterating and getting feedback. SpaceDesk has certainly opened my eyes to be better at controlling the tempo of your project roll-out.

What is your favorite Bubble hack?

My favorite Bubble hack is continually learning how to make a Bubble application look and feel like it's not "Bubble," but "real" code. Most recently, my favorite hack is to use a floating group as a main container for the entire content body and use a collapsible group to control vertical scrolling. This allows you to build a professional-looking SaaS application with an SPA (Single Page Application) with a professional look and feel. Using groups inside the floating group as your pages is key.

Join the discussion

That's it. I hope you got some value out of reading this. 

Do you want me to write about a specific topic, or do you have an awesome Bubble hack you would like to share? I'd love to hear from you, and I'm looking forward to engaging on Twitter (@DamianJanzi), in the post comments, or the Bubble forum. 

That’s it. Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io