Help please! My about and contact link buttons keep shifting across different screen sizes!

Good day to all the good people here at the forum,

I’m trying to finish up my portfolio (finally!) but keep running into the major issue of not being able to consistently position the three buttons on the homepage (the about, the work which is shaped like a portal and the contact buttons) responsively. Here is the read-only link for my site:

My current approach has been to use relative positioning in the unit of em’s to do so but it does not achieve the desired result across other screen sizes but can be seen on my own screen.

For example in the second image, you can see what it looks like on a friends 1366*768 screen.
I would greatly appreciate if you went to this link:
and show me what it looks like in your browser (while mentioning your screen resolution) and any advise that might steer me in the right direction to solving the issue.

Glad tidings, fellow webflower

Hey @Ananya_Panda,

This seems like a really complex design that probably requires some special coding/JS.

You might try to remove those elements from the grid, because the grid is forcing restrictions like padding and margin.

Hi @Kevin_Mooney,
Thank you so much for your reply!
Is overlaying of link blocks on a background design complex? tbh I have very limited coding knowledge and have spent countless sleepless nights on this design and really need to get it up and running asap. I would be super grateful if you mentioned a few terms/keywords about the specific (JS or otherwise) coding approaches that could help me do this.


The overlaying of link blocks on a background isn’t the complex part. The complexity comes in the responsiveness of those blocks. You essentially have unlimited screen sizes that you are fighting against and while you might be able to get close, it’s going to be hard to be perfect.

That is why I suggested some sort of JS.

I wish I could be more helpful.