Relative text on top of responsive image

manukap20077 · 2024-07-28T15:57:43.665Z

In my app, I have an image that is essentially an empty template for a football player´s info. I want to have text on top of the image, above the empty spaces. For example where it says “name:” on the image, there should be a (current user´s name) relative text to it´s right. The problem is that I have only been able to put text on top of the image by either making the whole thing fixed layout, which makes it unresponsive, or using negative top margins on a columned group with the image on top and the relative user info texts below with these margins. The problem is that the use of margins also make the page unresponsive. I have been stuck on this for days, anyone know how to approach this?

animisha45 · 2024-07-28T16:26:27.955Z

Did you try align-to-parent? That would work perfectly for your use case.

Put the text and image in a group with alignment ‘align to parent’. Add margins if necessary. Hope that helps.

animisha45 · 2024-07-28T17:10:50.125Z

No it shouldn’t. In the screenshot below, the text moves into next lien if it is too long.

Screenshot 2024-07-28 at 10.40.07 PM990×878 249 KB

The image has top & left margin of 8px. The text has right margin of 8 px.

Newed · 2024-07-28T20:45:37.051Z

Couldn’t you have both (label and surname) as text elements instead of having the surname in the image itself? That would help fix this issue.

Also, in that case you could control the font size of the surname based on the dimensions of the image.

manukap20077 · 2024-07-28T21:20:13.307Z

Yeah, that would fix the issue. Unfortunately, I need to use the image and put the text on top of it because i need the exact template of the image, so it is the same as fifa´s. and i cant replicate the image with bubble´s elements.

animisha45 · 2024-07-29T01:57:38.032Z

In the screenshot is the image the background part or background part + Kaplan?

manukap20077 · 2024-07-30T00:48:29.638Z

Sorry for the late response and thank you for helping me! Background part is effectively background part + Kaplan. It is a part of the image that says apellido / Surname and below it should be the relative text that corresponds to the user`s surname, but for the sake of solving this I put a random surname

system · 2024-10-06T15:58:41.148Z

This topic was automatically closed after 70 days. New replies are no longer allowed.