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 Furniture Challenge

shan1y 190

@shan1y

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


Feedback welcomed, especially on the transition on desktop design. Had a tough time with adding the triangle and unsure how to properly sync the transitions. Looking forward to seeing others' solutions for this one.

Community feedback

Cacti 390

@nottohave

Posted

Hello @shan1y, congratulation on finishing this project. For this concern on the transition on desktop design, you can move this part

display: flex;
justify-content: center;
align-items: center;

to the body at media query 768px.

  • For your triangle at the same media query, .triangle-down.clicked { right: 0%;} . Let me know if this helps.
0

shan1y 190

@shan1y

Posted

@nottohave thanks, I applied your first suggestion. As for the triangle, it's unclear as to what you're suggesting? Should I be removing the rest of the styles in .triangle-down.clicked? Thanks!

1
Cacti 390

@nottohave

Posted

@shan1y Ah sorry for not being clear, my head was a little cloudy at night after I try to work your solutions. I meant replacing the Left: 87%; with right: 0%;. The reason I told you this because the triangle is not directly above the reply arrow on my device, so I tried with my code and it reset the triangle to stay on top of the reply arrow. I hope we are talking about the same thing here.

Marked as helpful

1
shan1y 190

@shan1y

Posted

@nottohave oh okay! Thanks very much! I'll give it a try :)

1

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