Article preview component

Loved your solution - I was facing challenge to get the mobile view correct especially for the share section which sits at the bottom for mobile view - referred to your solution for the same - also liked how you have added click EventListener on the entire document to close the share modal when clicked anywhere on the screen

Very awesome work. Kudos!

Picture perfect.

Great job! You've inspired me to take on more challenging projects here.

Great work @catherineisonline,

Maybe some advice for increasing your accessibility web by reading this article https://medium.com/swlh/all-we-need-to-know-about-web-accessibility-8d0957208f

don't forget to hit button "remark helpful" cheers :)

Nice project from a genius

Good job! ✨

The way you centered it works for screens with 1440px but when you put it on a bigger screen it ends up breaking, and your article ends up expanding too much. If you want to test, one way to solve these problems would be the following:

• To ensure perfect alignment on all screens, we can use the display flex, so just remove ALL the margin from your .article-container and add the following code to your main tag:

main{
    display: flex;
    justify-items: center;
    align-items: center;
    min-height: 100vh;
}

• And to prevent the .article-container from expanding, just put a max-width on it:

.article-container{
    max-width:720px;
}

If you only have a 1440px screen, you can test other sizes using your browser's DevTools

Looks great!

hey Catherine , I take a look to your code is very clean and easy to understood, however you may want to take look at CSS max() function for the width property, it's really helpful and you may not need to use media query at all in small component. have a good day and happy coding :)

wow I like your code and solutions. I learn so much from you.

It seems you just edited it, because I got to see "test" everywhere in the page and the layout is broken :'(