Skip to content
OverviewSolutions
8
Comments
2
Jan Wągrowski
@JanWu100

All comments

  • Jan Wągrowski•190
    @JanWu100Posted over 2 years ago

    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
    @sommmmoreSubmitted over 2 years ago

    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 ! :)

    Fylo data Storage with html and css

    1
    Jan Wągrowski•190
    @JanWu100Posted over 2 years ago

    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