Different phone sizes

So what does everyone do to fix the issue with different screen sizes / devices?

I launched an app that looks good on standard device size but the larger XL devices with the lip at the top cut off logos / titles with the phone speaker inset.

(I’m talking about a Pixel 3 XL with the lip at the top)

Do people clone the project and change for devices that look funky?


1 Like

I believe that CSS media queries based on screen size are the general solution to this in most environments.

Oh, where do we edit the CSS? I’m fine with media queries, just didn’t know I could edit CSS.

Currently it is not possible to edit the CSS in Adalo.

So how would you go about it? Thanks in advance!

You can try to design on a bigger screen size. Most of the time scaling down works better than scaling up. It is a know restriction that you currently don’t have much influence during design how the flex box behavior works.

As suggested already, designing from a bigger device generally works better in these situations.

Another tip is that you can over extend your boxes just a little outside of the lines of the screen. This can also help.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.