Streaming live at 10am (PST)

Map with working links on all display sizes


#1

Hello,
I want to design an interactive card,where the viewer is able to click on the appropriate Universities. I already have 2 working link points but as soon as I view it on an ipad or windows tablet the points are randomly positioned. They look finde in the smartphone,tablet view of webflow but don't work in reality. Is there any way to connect the points to the card so that the position stays fix all the time?
Would be great if somebody could help me out!

my site is http://eciuexchange.webflow.com/


#2

Hey @creatspot you'll have to use Absolute Positioning instead of margin and padding. What you're trying to do is a bit tricky so you'll have to play around with the positioning a lot and you gotta make sure that the background stays in the same place (so that the absolute positioning will always stay true to the location). You'll also have to set your Map block to "relative" so absolute positioning will be relative to it instead of Body (default relative behavior).

We did something like this in our pre-release demo: http://playground.webflow.com/


#3

Hey!
Thanks for your fast answer. I knew that it had to do with the different positing possibilities but my brain couldn't figure out what the best practice would be. I will try to solve it your way and hope it will work.
Thanks again!


#4

#5