When I created a web app to go with my Adalo mobile app, what I get is a wide web page with a skinny section of content in the middle of the page, and a lot of “blank” space on the left and the right:
I understand this is how it has to look, and I’m ok with it. But I’d like to fill some of that left and right space with a graphic, just to make the screen not look so empty. What’s the best way to do that?
I also understand the web app screen is not responsive, and can’t resize based on the current device screen size. So, can I fill that space with an image or pattern? If so, how should I size it? And should I just use an image, or should I use a rectangle and group it with the image?
I’m sure I’m not the first person to try this. I’d appreciate any thoughts anyone might have. Thanks so much!
I’ve never done that before, but for sure what I would do is trial and error. Just try different ways of filling that space and see how it goes. You will learn much more from those trials than from getting a direct response on what to do.
As you know, if you don’t want to affect the live version, then create a copy of the DWA to run those tests.
Then you can use Chrome’s Inspect tool to test the experience with different screen sizes.
Thanks @dilon_perera and hi @MikesClub!
Please help me understand what you need so I can help you. You want to place some decorative elements on the blank space or you want to lengthen the elements you already have?
I’m really just trying to fill that massive blank space on the left and right sides of the screen.
I’d like to put more content per screen for the DWA version, but that’s tricky since the DWA isn’t responsive to different screen sizes. And I don’t want to create multiple sized versions of each screen.
So I think the first answer is to just put some kind of decorative background image.
And then I’ll redesign my layout a bit, to make it all look not so empty on bigger screens.
In the end, I think I might just have to live with the big empty spaces.
