Article Preview Component with share icon

Hi Girish,

I think the problem is caused by this styling margin: 15.625rem 20rem 5rem; on .container class. If we reduce the browser width, the margins are not changing, but the width of the content is changing drastically. You can remove that styling, and use width or max-width instead. Create another media query breakpoint to accomodate the iPad or tablet display. Also, give the image this style: object-fit: cover; to avoid the image being squeezed at any given width.

To show and hide the share window in one click, first change line 45 and 68 in index.html to this

<button class="share-icon" onclick="toggleDisplay()">

We want it to be concise, so let's just stick with one function instead of two. Below is the script for function toggleDisplay(). Use them to replace the existing script.

const share = document.querySelector(".inactive");

function toggleDisplay() {
  if (share.style.display == "flex") {
    share.style.display = "none";
  } else {
    share.style.display = "flex";
  }
}

There's a lot of other improvements that we can do for this particular challenge. But for now, I hope this few advice could help you in some way.

Happy coding!