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?
Here is my site Read-Only:
(how to share your site Read-Only link)
Without your readonly link I can’t see your site construction, so let’s pretend you have to containers we’ll call
.right, as well as an outside container called
These are arranged as;
Now you have an image we’ll call
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;
.left ( relative positioning )
.arrow ( absolute positioning, bottom right w/ adjustments )
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 )
.arrow ( absolute positioning, bottom center w/ adjustments )
That’s the basic approach I use. You’ll need to play with this since you have multiple objects here.
Thank you - will try this out! I pasted my read only link in there, so strange it didn’t show up