Help keeping multiple buttons properly positioned over background image

Newbie here. I am trying to make a personal site to send to friends as an invitation to a party.
The idea is to have a sort of interactive ‘ticket’. I created a ticket in photoshop with information on it such as date, location, ‘more details’ etc. The idea is to position link blocks or buttons overtop those pieces of info on the background image so that people can tap on the location to open a google business info page, on the date to open a google calendar invite, on a fake barcode that says ‘more details’ to bring them to another page with info about the party.

I have been trying different ways to accomplish this every day since last week and I am trying hard not to rage quit the whole idea! I cannot figure out how to position elements over the correct areas of the image, and of course when I slide the display size up and down, the buttons go all over the place. How do I make them stay put?

I’m not super comfortable posting the read-only webpage because it includes personal info about the time, date and location of our Civil Ceremony Afterparty and I don’t want to tempt wedding crashers D: I hope I’ve been descriptive enough.

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

There isn’t really a good way to do that considering the page is responsive so the buttons will move around. I’d suggest recreating the design right in Webflow and making the elements actual divs/links. I can’t really advise more than that. good luck!

1 Like

Thanks for taking the time to respond!
One of my first attempts in creating this involved building actual divs/links and those were moving around too much as well. Is there a function I can use to anchor div blocks together somehow?

Hey Janis!

Check this Ticket test
Is this, kinda, what you need?

1 Like

This is very much like what the ticket I made in photoshop looks like…I’m just having difficulty making areas on the ticket tap/clickable. How did you make your buttons stay in the proper areas between display sizes?

I hoped to make the location, the date, ‘more details’, and the ‘hosted bar tab’ sticker tap-able links.

I can be a bit tricky but using percentages, position absolute and tweaking between breakpoints.

Feel free to check the project I shared and play around with the settings (you can’t break it, just refresh). Maybe even try recreating it.

And if you don’t figure it out let me know.
(You can even send me the read-only link in a DM, I’m in Greece I won’t crash the party :smiley: )

1 Like

Thank you so much for taking the time to help me! I might DM my link to you after I work on this a bit. I’ll play with your site and try to bring my own site up to speed. Thank you <3

1 Like

Wow this is exactly what I needed. I will share a link with you when I finish it in case you want to see. I could hug you.

You can come to my party ;p

I’m wishing you all the best!!! Have sooo much fun and a drink for me! :smiley: