article preview component using flex, grid, transition and position

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

I ran into issues with CSS selector specificity. The classes I added dynamically via JavaScript couldn't override the styles previously defined in my CSS. I wasn’t sure what keywords to search for, so I turned to AI for help.

Eventually, I realized the problem was caused by the fact that my original CSS used highly specific selectors, whereas the dynamically added classes had more generic selectors. For example:

• before

.active {
...
}

• after

.card .content-right .active {
...
}

However, more importantly, I’ve gained a much clearer understanding of how CSS specificity works.

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

I was trying to make the drawer image overflow hidden when it exceeds the container boundaries. However, when I set height: 100% without specifying the width, it took up the full width of the screen instead of hiding the overflow content.

To work around this, I set width: 123%, which helped achieve the visual result I wanted.

.card .img img {
    width: 123%;
    height: 100%;
    border-top-left-radius: .5rem;
}

I'm not sure if this is a good solution, so I’d really appreciate any feedback or suggestions from others.