I have a screen that is giving me layout issues.
Right now, the layout consists of a header image, a column with three rows in it and bottom nav bar. Here is what it looks like in design.
Unfortunately, when I go to preview and on a live test on my phone, it comes out looking like this:
Each of the pictures is a button. I have the buttons set to 45% of the screen width and the height is set to relative, 100%. For the life of me, I can’t get them to fill out the screen the way I want them to.
I thought about setting the size in the blocks, but it looks to me like you need to set the size in absolute pixels. There doesn’t appear to be a command to allow you to set the width base on % of screen size and then set the height accordingly.
I’m wondering if I should change out the buttons for images that are clickable. Does anyone think that would have an impact? I’m also wondering if there are any guides available on the way to get the layout to appear the way that it does in the design?
I do need to say that I’ve been saving this project in versions as I go along. I have an older version that formats properly in preview. I’ve gone back through the design elements in each version and the settings appear to be the same. So I’m at a bit of a loss here.
Any assistance would be very much appreciated.