Correct settings so all text, images, and widgets auto-fit to any resolution?

[Hayley]

I am creating a title page on a Card widget which includes a button, text and image. I have set the card at 100% width and height and the button, text, and image all set at percentage % too. 

HayleyLam_0-1634591100844.png

When published on a wide screen monitor, the image cuts off 

HayleyLam_1-1634591221512.png

But when viewed on a smaller screen, the image and button resize fine but the text cuts off 

HayleyLam_2-1634591310282.png

What are the correct settings to ensure everything auto-resizes correctly? Can I do it without the card (just on the blank full screen page)? 

[ShengdiZhang]

Hi @Hayley ,

You do not need to use a card widget here unless you want to have a hover effect. You can simply put widgets on the fullscreen page.

For the image cut issue, this is because 'Fill' is used for the image position. You can change the image potion to 'Fit' to ensure that the image is not cut at all resolutions.

ShengdiZhang_0-1634613102383.png

For the text cut issue, I suppose you also want the text and the button widget to be horizontally centered. So you can add a Fixed panel widget, and put the text widget and the button widget into it.

Set the text widget as full width and auto height:

ShengdiZhang_1-1634613536825.png

ShengdiZhang_2-1634613564742.png

Set the button widget horizontal center:

ShengdiZhang_3-1634613598169.png

Another way to do this is adding the text widget and the button widget into a column widget, and set the column vertical align to space between:

ShengdiZhang_4-1634613903120.png

Hope it helps,

Shengdi

[Hayley]

Hi Shengdi, 

Thanks for your help. That fixed the issue for the image, however I would like the text and button to be positioned slightly to the left. How do I configure this so it works for all screens?

Thanks!

[ShengdiZhang]

Put the text widget and the button widget into a fixed panel is to make the text and the button horizontally centered. You can move the fixed panel to the left of the page.

See the effect at the resolution of 1440*900:

ShengdiZhang_0-1634621817714.png

At the resolution of 1024*768:

ShengdiZhang_1-1634621844108.png

[Hayley]

Hi @ShengdiZhang, I have put the text and button into a fixed panel and horizontally centered. The image and button are responsive however the text still cuts off on smaller screens. Am I missing something on the text settings?

HayleyLam_0-1634673268247.png

On smaller resolution:

HayleyLam_1-1634673348358.png

[ShengdiZhang]

Would you mind sharing your app with me? You can send me the link to your app in a direct message or in the comments below.

Shengdi