Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article Preview Componenet

P

@PeterBachman100

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • 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 the javascript simplicity using the toggle feature for class list.

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

Some of the padding sizes seemed unusual to me, so I had to use more media queries for the padding than usual.

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

I'll be curious to see how others have structured the pop-menu in html and positioned with css. It seems most intuitive to have it be a child of the footer section on mobile for the layout on the bottom, but then on desktop it would be easier for it to be a child of the share button so it can be positioned relative to that.

Community feedback

N1Dovud 170

@N1Dovud

Posted

Hi there! I really liked your solution. In fact, it is among the best I have seen. However, I noticed one tiny problem. There is horizontal scrolling when the viewport is between 750px and 800px but not a big deal really. What I am fascinated by is how you managed to keep the pop menu in relation to the share button and in relation to the lower section for desktop and mobile views respectively. I personally created two pop up menus, put one of them inside the section for mobile view, the other one relative to the share button as a parent. Only then I was able to achieve responsiveness. I was basically toggling the right pop up menu depending on the viewport width. But you managed that without that, I guess because your main container has a fixed width unlike mine, therefore the pop menu seems to stay relative to the share button even though it is relative to the section. Good job again! Way to go!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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