Article Preview Component

Community feedback

• 

  P

  Tom Winskell•130

  @tomwinskellPosted 21 days ago

  Nice work! You completed the challenge and your solution looks awesome. You also said this is the first time you are using JavaScript which makes the achievement even more impressive.

  It's cool how you made the triangle or pointer. I didn't think to do it like that. You can actually make just a triangle using CSS. See the code here and a short article about it:

  .preview__footer__share__arrow-down {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--dark-blue);
  }
  

  CSS Triangle

  Personally I positioned my share callout using position: absolute;. The parent div then has the property position: relative. Like this:

    .preview__relative__container {
      position: relative;
    }
  
    .preview__footer__share {
      position: absolute;
      top: 150px;
      left: 280px;
    }
  

  What you have done works though so I wouldn't stress about that. However, if you're interested in a good article about positioning elements using absolute or relative I've put a link here. Positioning absolute, relative to parent

  The one thing I think would make a big difference to your solution is that the elements jump around on transitions. Functionally it's not a big deal, it's just annoying. I had an issue with this as well. I believe it's happening here because the elements your hiding or showing are different sizes. The solution I found worked was to contain my footer in a div that had a consistent height. The height of the tallest element. That way, when the smallest element was shown and largest hidden, the container remains the same height. You could try re-factoring your code to include this small change, it would make a big difference I'm sure!

  I hope this helps, if it does, I'd appreciate if you can mark my comment as helpful!

  Good luck with your next project! Tom

  Marked as helpful

  0

  ---

  

  P

  Marcus•160

  @marcus-hillPosted 20 days ago

  Hi @tomwinskell - thanks so much for your feedback! I'll look to make the necessary changes to the code.

  0