Article Preview Component HTML CSS JS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hello

  I'm afraid there's some invalid html in here. You can't have a h1 inside an anchor tag. Swap these around, put the anchor tag inside the h1 and that should be fine

  There should be no text in a div/span alone. Always use meaningful elements. For the date you could use the time element (make sure you include the datetime attribute on it).

  The share content seems to be active (visible) on page load at the moment, so that should be swapped.

  On mobile, the share content doesn't look right when it's visible (doesn't look like the designs, still has the down arrow pseudo etc)

  Here are some tweaks I just made in browser to improve the position of the share content on desktop. I've mad the card footer position relative and aligned to that instead. This means the share content will never be positioned off screen to the side, kind of a suggested enhancement on the design..

  .share-option {
    /* bottom: calc(100% + 28px); */
    /* padding: 17px 40px; */
    /* -webkit-transform-origin: bottom; */
    /* transform-origin: bottom; */
    /* margin-right: 5px; */
    top: -3.75rem;
    padding: 1rem 1.5rem;
    right: -2.5rem;
  }
  
  .share {
    /* position: relative; */
  }
  
  .profile-footer {
    position: relative;
  }
  
  .share-option::after {
    /* left: 50%; */
    right: 2rem;
  }
  
  .share-button {
    /* height: 1.8em; */
    /* width: 1.8em; */
    /* padding: 8px; */
    height: 1.8rem;
    width: 1.8rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    note: why is this getting an active class when the share content is not visible? That is very counter-intuitive.;
  }
  
  .container:hover .banner {
    /* -webkit-transform: scale(1.1); */
    /* transform: scale(1.1); */
    note: this is horrible ! Don't add hover effects unless something is interactive;;
  }
  
  body {
    overflow-x: hidden;
  }
  
  .share-button img {
    max-width: 100%;
  }
  
  

  11

  Marked as helpful