Rendering components on all devices

Are there any tutorials or resources that explain how to render elements on a page to make the app design responsive on different sized devices (i.e., iPhone 8, iPad)? Or does anyone have a strong enough handle on how it works? I checked the Adalo videos section and didn’t see anything on this topic. I am a bit frustrated especially since there doesn’t seem to be a logical way to do this.

This is my first time making an app and using Adalo. As a web designer, I am used to being able to make responsive websites using Webflow. In Adalo, getting things to line up is usually a matter of a bunch of trial & error tweaking & moving things around, previewing, playing with centering, and left aligning elements until everything eventually looks acceptable but the process is haphazard and not deterministic. And it’s never exactly right, especially when trying to make something look right on a small iPhone and an iPad. I’m shooting in the dark to get it to render acceptably and it’s a tedious/frustrating process of tinkering.

I would love to see a tutorial or an explanation by someone who understands exactly the rendering logic Adalo. Trying to demystify the rendering process is preventing me from designing my app. Thanks for any help you can provide!

3 Likes

Right there with you on this, tbh I thought it was just me and I was probably doing something wrong…Maybe we both are? The biggest example for me is getting the app bar to work right. For example (and to be clear I have no idea how to make the following work…) ideally in the web app the user would see a menu across the top, but when on mobile, the app bar would get the menu button on the left allowing the user to use a hamburger menu, which wouldn’t make as much sense on mobile. I can make those menus work independently, but can’t figure out how to actually make it responsive.

In addition, I’ve got issues where if I have an element centered, and put something to the right or left, it must be dropping in a div or something and it screws the component alignment up royally! Hopefully we are missing something, and someone smarter will respond!

1 Like

was this ever addressed? Its frustrating, if I cant make the site responsive I’ll cut my losses now and move to a service that can

ever figure this out?

I’m finding Adalo very compelling from a feature point of view, but it definitely appears to be “mobile first” with desktop web being a complete afterthought.

Unless I make everything 350 pixels wide, placed directly in the center of the screen, getting it to work while being responsive is completely unobtainable it seems.

There’s no way to toggle whether, or how, elements, including text, should scale when the screen resizes. This leads to a title being cut off when the screen shrinks, or changing to multi-line, which I don’t want.

Any direction would be great!

200K customers and we can’t get one response to a RESPONSIVE DESIGN? This is aggravating. I am trying to hold out but not being able to have a working iPad or tablet design is a serious deal-breaker.

1 Like

Currently there is no way to make your design responsive with Adalo alone.

We (NoCode Monkey) did release a component called Device Detector that will allow you to detect the users screen size and send users to a screen that fits their device.

This currently works on web and webapps. Technically it would work on native too but Adalo currently disables iPad.

If you have any question feel free to dm me.
You can see the component in our store here.
Nocodemonkey.io/store

Also all our components are currently 30% off.