Hello,
Below the page that I’m trying to build.
The rules are:
The problem that I’m facing is (1) how to make the image fit (width/height) the remaining empty/free space of the viewport/screen without scrolling the screen. (2) Set the button as absolute and locate it with some fixed padding at the bottom .
Could someone help me on how to do (1) and (2) ?
Best Regards.
Considering your question, I’d have to ask, have you yet attempted to do this? Appgyver is based on Flex Box and other CSS properties. Also, have you gone through the basic tutorials?
I suggest you spend a bit more time learning the interface as these are basic functions.
Anyway,
1). Set the image resize mode to cover. located under the style panel.
2). The position options are located under the layout tab. you can set it to absolute from there.
Yes, I tried to read and watch as much as material/tutorial I could. But I couldn’t yet make it work. that’s the reason I’m asking for help.
My last try is the result below.
On the Composer, it looks like fine. But when previewing in my Iphone SE (1st gen), I got the undesirable result, I mean, the image should fit only in the small free viewpoint at the bottom and not going “out of the screen”.
Great work! It looks like your content is too tall for the phone screen as the spacing between your components doesn’t seem to adjust based on screen size. Does your page currently scroll? I suggest setting your justification to space between. Also, try setting the page layout settings to “stretch to viewport height” and see if that fixes the issue.
Hi @Brenton_Richards ,
Below the configuration of the Page Layout.
I’m already using “stretch to viewport height" option. Any other suggestion ?
In the previous image you can see how the components were divided.
I made a small video, I had to do it from the beginning so I could help with some idea that you can get out of this video. (The video is of poor quality so that it weighs less when uploading it.).
There you will find the settings and tricks so that you have an excellent view on your iOS, remember that all the screens are different and adapt differently, but with this configuration it is ready for all the screens.
Already the rest you play with the image based on my settings by changing the values.
Final result of the video:
