Emerx27• 0
@Emerx27
Submitted
Jan Wągrowski
@JanWu100
All comments
- Jan Wągrowski• 190
@JanWu100
Posted
Hello there, I really like your solution. I noticed one very minor thing that is missing from the original design. Card background is in fact a circular gradient. I figured I will point this out as I have learned something about positioning gradients myself doing this challenge and I figured that maybe you will as well :). Have a good day!
Marked as helpful
0 - Soham• 100
@sommmmore
Submitted
How could I make it more responsive ? I am not so good with the media queries. And also with varying widths, it gave some minor issues. If you could review the code and help me improve, I would be grateful. Have a nice day ! :)
Jan Wągrowski• 190@JanWu100
Posted
Hello there, It looks great :) I have a tip for you regarding positioning the .storage-left popup. You have set position:relative to .storage, and then position: absolute to .storage-left which is very good.
In order to make your popup placed exactly as in the designs:
Desktop view: Instead of counting distance from left (left: 60vw). Just change it to right: <use padding of your storage element here>. So in your case right: 25px. This will make it stick to the right side instead of swiming left and right on different screen-sizes.
Mobile view: I see you try to center this element with static value - "left: 22vw;". The trick to do it (and I use it for every project) is to set left: 50% - which will make you element start exactly in the middle. And then on that element (.storage-left) apply "transform: translateX(-50%)" which will move this element to its exact middle :). So for the vertical position you can do the same = top: 100%, transition: translateY(-50%).
Also your .bar have width of 95%, shouldnt that be 100%? ;), As a last tip, you have "display: grid" repeated in media querry, if you are not changing property, you dont have to repeat it.
I hope that helps a bit, and that It will make relative positioning a bit easier for you for the future :). Cheers!
Marked as helpful
0
