Skip to content
Submitted about 3 years ago

simple data storage with html and css

david flo•80
@davflocreator
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

So the message with "185 GB left" on firefox works like the design but chrome, it doesn't if you guys know any fixes I am happy to hear, and I don't know how to make a border radius to it on the left bottom corner because I used clip-path. Any other mistakes that I did would be appreciated if you guys can tell me, thanks.

Community feedback

  • Akanksha Yadav•355
    @Akku22janPosted about 3 years ago

    Hi. First of all congratulations on completing the challenge. I had faced the same issue, while using clippath you can't retain the border-radius because you have clipped the border. Instead of using clippath, make the bottom right radius zero. And add the following code. You are good to go.

    element::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: white white transparent transparent; }

    I have copied this code from https://www.w3schools.com/css/css_tooltip.asp P.S.: try changing left, margin values. You are good to go. Keep coding.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join 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