Submitted 20 days ago

responsive article preview component using html css and js

anthony• 170

@Codingtry123

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?

wrap svg inside container simplify the js code

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

how to toggle the share panel add event listened respond to the click event

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

how do I write media query in js

Community feedback

Dirk• 210

@dirkvankrieken

Posted 20 days ago

Hey nice job! Some improvements that could be made: Not all colors match well with the designs (background color and font colors) The spacing between the text blocks (margins/paddings) could be better matching. The share element on small/mobile size could be made so that the size of the containing element does not change on click but remains the same. The answer to your question "how do I write media query in js" is, I think that you can use the window.innerWidth property to check the width of the window in Javascript.

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