Responsive design

Hey there,

I’m pretty new to Adalo and looking to ship my first app but am seriously hindered by the inability to have a web app look even remotely legit on mobile. Responsive design seems like table stakes these days so I feel like I’m missing something. Any tips on getting a desktop site to function responsive?

3 Likes

I’m having trouble with this as well.

It seems like unless you are using dynamic content like the built in forms and tables, or your elements are perfectly sized then your elements will look like garbage on mobile no matter what. Seems like you need to design a desktop web app, then a standalone mobile app instead of trying to make the desktop site work on mobile size browser…

I just made a post asking how to keep some icons from spreading out too far on desktop after I have placed them where I wanted…

I wish the positioning was more exact or we had some manual control over margins etc under certain circumstances.

If you figure anything to help you I would love to know.

Thanks

2 Likes

So something I found in another post, and what fixed my issue was creating rectangles which seem to ‘anchor’ elements on the screen.

For my situation I create a rectangle, placed the elements where I wanted then grouped them all together with the rectangle then tested in the preview. The icons, which were previously spreading out sideways from the center of the page when the page stretched, were then anchored where I placed them.

So rectangles may be the answer.

Something else in regards to making things look better on mobile, for me anyway, I have several modal forms popping up from my welcome screen and found that if there is any text it has a lot of problems with that. So, I made sure nothing was wider than 350 pixels and made sure it was all centered in the rectangle for the modal and it seems to fixed a bunch of the formatting problems I was encountering. I still need to fix some other forms though.

3 Likes

Hey @naossoan, what post was it where you found the rectangles as a solution? I’m just now running into this too.

At NoCode Monkey we have a Device Detector component that will allow you to detect the screen size and send users to screens built for the correct size.

nocodemonkey.io/store

Device Detector (1)

2 Likes

I’ve seen that! You have quite a few really helpful components. In this case, though, I would prefer to just have the screen work well using just a single screen as I’m only targeting mobile.

Muito bom… vocês possuem uma equipe competente… o Adalo está muito atrás de vocês!!!

1 Like

Hey Michael! Can it work on the first screen as well (without any button clicks)?
I.e, when someone goes to myadaloproject.com they immediately see the version that suits best their device - mobile or desktop

Yes and no, technically you would make the first screen a filter screen with transition “none”.

What would happen is the user would land on this screen and immediately be sent to the correct screen.

If you use transition “none” it will allow you to make the transition seamless.

1 Like

Hi @Michael … I sent a direct message to you… can you answer me?