Fylo data storage component solution with HTML and CSS

Community feedback

• 

  catherine f healey•515

  @c-healeyPosted over 4 years ago

  Your desktop layout is perfect. For the bubble, I googled 'chat bubble' and modified the example code I found. I've always seen bubbles, arrows etc implemented with a psuedo class. FWIW this is how I implemented the status bubble.

  .status-bubble { position: absolute; top: 80%; right: 50%; transform: translateX(50%); background: white; border-radius: 0.4em; color: var(--color-very-dark-blue); padding: 1rem 2rem; }

  .status-bubble::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border: 10px solid transparent; border-top-color: white; border-bottom: 0; border-right: 0; margin-bottom: -10px; visibility: hidden; }

  And the media query for desktop @media (min-width: 768px) { .status-bubble { position: absolute; top: -30%; right: 0; transform: translateX(-30%); border-bottom-right-radius: 0; } .status-bubble::after { visibility: visible; } }

  1