Design comparison
Solution retrospective
I made the range slider by just using div is that correct or should i use input element and I am having difficulty building responsive pop up that has the content 185 GB left as I used two different divs and placed them using position absolute.
Community feedback
- @AgataLiberskaPosted over 3 years ago
Hi @samirhembrom007, I think what the progress bar is doing here is just showing the user how much storage they've used up, I don't think it's meant to be interacted with - so no need for range input :)
Using a div with position absolute is perfectly fine, but for the triangle, consider using a pseudoelement on the main div rather than a separate div - on my screen, the two are quite far away from each other. Or - you could have that triangle div inside the main one, so you can position it relative to the white box and not your second div.
I would also maybe have it go from column to horizontal layout a bit later - on smaller tablets like ipad mini, that white box is overlapping the text, and the icons on the left are tiny (you can see that in your browser in dev tools).
Also, have a look at how the background looks on different devices - because it doesn't always cover the whole screen.
Hope this helps, if you have any questions, let me know :)
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord