Discord UI Clone: Hero Image does not work correctly when zoomed out
Asked by ashish about 6 months ago
I am trying to make a clone of the Discord website. And I am facing a lot of problem with the images in the hero section. Please take a look at the gifs I have attched. (notice the hero section bg images when zooming out.)
Problem-> As you would have noticed the images in the discord website move when they are zoomed and it looks very nice, however in my attempt the yellow guy (left side image) remains where he was set and don't really move out.
I have tried a lot of things in my local environment as well but I really cannot wrap my head around on how would I do this.
Can someone please help me out with this. I have really tried to solve this, but was unable to do so, any help is greatly appreciated. Thank You.
1 Answer
Hey Ashish! It's great to see that you've clearly explained your query. I'm happy to help you out.
When the browser is zoomed in or out, re-size events and media queries are triggered. So, anything relying on the viewport will get affected. In your attempt, you've absolutely positioned the images relative to your blue full width container. This causes them to adjust with the growing container as you zoom out.
To replicate discord, you should start by containerizing the main content to stay within a max width and then position your assets relative to that container. I've forked your playground and edited the code to give you a quick example you can play around with:
Hope this helps!
