@TedJenkler
Posted
Hi @LukasT1,
Nice project overall! Your project looks good, but I noticed that the absolute elements aren’t responsive or consistent. I know it can be challenging—I’ve been stuck on similar issues for hours before.
To make your absolute elements responsive, you need to create a container element with position: relative;. Inside this container, you can use absolute elements and reference them to a specific place in the design. Instead of using px and having your absolute elements "dance" around your site, you can make them responsive with properties like top: 50%; left: 50%;, and then center them perfectly using transform: translate(-50%, -50%);.
This approach will make your absolute elements centered and customizable with any % unit.
Hope this was helpful!
Best, Teodor
Hi Teodor, thanks for your feedback. I am not 100% sure i understand though. What exactly do you mean by absolute elements?
I have to admit I was struggling with the main elements - the phone image and the card. I tried absolute positioning but after many unsuccessful attempts I decided to use CSS grid.
As for the responsiveness it looks fine on my end, but maybe I am missing something? Here is video I made in Chrome with different viewports Thanks for clarifying. Have a great day Lukas
@TedJenkler
@TedJenkler
Posted
Hi again, @LukasT1! Okay, that makes sense. I didn't check your CSS to be honest only made a responsive check, but I understand why it's behaving like that if it's using grid. I would suggest remaking it with absolute positioning and % values with a translate().
It seems like the parent’s height is changing when it isn’t needed. Try using dev tools and resize the viewport from around 1550px to 550px to see what I mean.
Ur project is still good and it works but if u ever make a bigger project like this you will cry yourself to sleep(been there)
