How do i approach this UI?
I have this UI requirement, i have tried to replicate this, but i am not able to position the profile image in center along with the surrounding stats, can anyone suggest an approach for this.
14 Replies
please find below desktop and mobile view
you can find the code i have made here
this is what i got so far
can you put this in a codepen or something similar?
I made a vite project, thats why i attached as zip
Let me try to make it in codepen. I don't know how to upload images there
you can use something like unsplash or picsum.photos to just have random images instead of the ones you're using
works well enough for demonstration purposes
I'm asking because I'm definitely not running a random vite project on my own PC, and neither should any one else tbh
Cool fair point😂, let me change and share, give me sometime i am out now
https://codesandbox.io/s/ui-test-5rpc3c
i have made sandbox, as i am using react
naveen_4136
CodeSandbox
ui-test - CodeSandbox
ui-test by naveen_4136 using autoprefixer, loader-utils, postcss, react, react-dom, react-scripts, tailwindcss
so the issue is in
LeaderboardStatistics.jsx, what have you tried to get the image to center? I don't see a profile image in assets, and nothing like an img tag or background-image in the class tag?i don't have any image for that, i just have a placeholder now, that is not an issue, i am facing issue in how to position them properly as i used translate y property to position them, there is a big gap in bottom of that section.
and how to show the stats on left and right side of the profile image section
hope i am making sense for you?😅 , my english is average
ah, I think I see what you mean
I'll have a look later today, if no one else has by then. I can't really dive into this now
sure, no issues
thanks for dropping by 😁
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
hey @vince6056 Thanks, i will look into it and ask doubts if i didn't understand