Submitted 2 months ago

Article preview component CSS & JS

Arnaud Lahaut• 200

@Arnotts33

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Happy with this first JS challenge. Might not be the perfect JS way to do it, I will work on it again to try to shorten it when I get more knowledge. But it works :)

I am happy I got the desktop and mobile versions right with the different "Share" layouts.

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

Trying to get the image exactly as it is on the preview. Could not get it exactly as I wanted.

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

Any feedback welcome and hints on how to play around with the image and my JS :)

Community feedback

Jacob Stone• 130

@jacob-stone9554

Posted 2 months ago

Hi Arnaud, fantastic work on your solution! I think it looks great!

One thing that you mentioned that could be improved is having the image lined up properly. One thing you could try to use is the object-fit property in your CSS where you style your image. While my solution is far from perfect, I used object-fit: cover and it seems to work pretty well for the given situation. If you would like to know more about the object-fit property, you can read about it here.

Everything else looks great! Let me know if you have any questions, happy coding!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord