started by mobile-first workflow, using flex-box css n DOM-javascript

Community feedback

• 

  Gio Cura•650

  @GioCuraPosted over 1 year ago

  Hi! 👋 To add the little arrow under your modal/tooltip, you have to add a ::before or ::after pseudo-element to your "compartilhamento" div.

  Go, to your style.css and write something like this:

  compartilhamento::after {
      content: "";
      border: 1.2rem solid;
      border-color: hsl(217, 19%, 35%) transparent transparent transparent;
      position: absolute;
      top: 100%;
      left: 50%;
  }
  

  Here, the arrow is made by setting border-color to have only one side with a color, and the rest being transparent. You can adjust the size of the arrow by changing it's width in the border attribute. You can adjust the position by changing the top and left values.

  Hope this helps!

  Marked as helpful

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  nice job with the challenge. A small observation: your arrow icon seems to look like ellipse rather than circle. To fix that you can simply change .5rem padding to padding: 0.5rem 0.75rem;

  To add that triangle below the modal, you can use something like

  .modal::before { content: ''; width: 15px; height: 15px; background: hsl(217, 19%, 35%); position: absolute; bottom: -7.5px; left: 50%; transform: translateX(-50%) rotate(45deg); }

  Hope you find this feedback helpful!

  Marked as helpful

  0