How to properly position a scribble arrow pointing to another object?

Hey everyone,

I’m trying to emulate the scribble trend we’ve seen everywhere (attached my design mockup here).

What is the best way to make sure on desktop and tablet that this arrow is always pointing to the survey container (class is.landbot-container)? For mobile, the flexbox will switch to vertical layout so an arrow pointing down will just have static positioning.

Is there some custom code/js I have to use?

TIA :slight_smile:


Here is my site Read-Only:
(how to share your site Read-Only link)

Hey Erica,

Without your readonly link I can’t see your site construction, so let’s pretend you have to containers we’ll call .left and .right, as well as an outside container called .outer.

These are arranged as;

  • .outer
    • .left
    • .right

Now you have an image we’ll call .arrow.

You can make it “fix” its position relative to any of those 3 containers, by putting it inside of that container, setting it to absolute positioning, and then setting its container’s positioning to relative.

For example if you want the arrow to be "fixed in relation to the left text part, you’d arrange them as;

  • .outer
    • .left ( relative positioning )
      • .arrow ( absolute positioning, bottom right w/ adjustments )
    • .right

Or, if you want the arrow to be an independent object of left & right, you could position it relative to the outer frame as in;

  • .outer ( relative positioning )
    • .left
    • .arrow ( absolute positioning, bottom center w/ adjustments )
    • .right

That’s the basic approach I use. You’ll need to play with this since you have multiple objects here.

2 Likes

Thank you - will try this out! I pasted my read only link in there, so strange it didn’t show up :thinking: