article-preview-component

What challenges did you encounter, and how did you overcome them?

The most noticeable challenge I encountered while doing this project was calculating the share button's position. My first thought was to use position: absolute for the media container and position: relative for the share button. However, when it came to the mobile layout, I needed to calculate the full width, and in that case, the first approach wasn’t effective.

My second thought was to use the getBoundingClientRect() function to calculate the share button's position first and then calculate the full container's position on mobile devices. But I encountered some bugs when it came to resizing and clicking, and I also faced some issues with the overflow method.

Finally, I created two media containers: one for the desktop layout and the other for the mobile layout.

What specific areas of your project would you like help with?

So, to overcome and complete this challenge, I created two media containers:

1. The first one is for the desktop layout, which I placed inside the tag. (This is because when the media container becomes position: absolute, I want the share button—also inside the tag—to be positioned relative to it and correctly calculate the position to center the media container.)

2. The second one was placed outside the tag (as a sibling of ). I did this to calculate the 's width and position, which I used to determine the media container's position for the mobile device layout.

Question: Is this approach—creating two similar elements and showing one while hiding the other at different times—considered bad practice?