Hello person!

I would like to ask for help with something that is theoretically very simple, but that I have not been able to solve.

I have a CardBackground that has my background image and a trash icon inside.

I want to align this trash can icon in the top right corner of the image, but I can't.

I've tried using different options, some even show the position correctly in the studio, but when I open the project in the browser or cell phone the icon simply doesn't stay in the right place.

I've already tried using the standard classes from OutSystems ("display-flex justify-content-flex-end"), in the studio the position is correct but in the app it's not.

I've also tried using the component (ColumnsSmallRight), placing the icon in the smaller column on the right, and the same thing happens, in the studio the position is correct but in the real app it's not.

And lastly I tried using CSS.

This icon is in a smaller container than is inside a container that is the height of the background image.

The CSS used was the following:

.Biggest Container{    

      position: relative;

}

.Container with icon{    

      position: absolute;    

      right: 0;

}

And the same thing repeats itself, the position is correct in the studio, but not in the app.

Would anyone know how I can resolve this?

I also leave a link to a copy of this screen with anonymous access for anyone who wants to test and inspect the code.

LINK: https://personal-sazpoglu.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/CloneOfImobi/ImovelDetail3?_ts=638539024322705661

Thank you all!