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 component

#react
Mehdiā€¢ 990

@siavhnz

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


Hi dear community šŸ‘‹

I've just completed this challenge, I tried to use @keyframes and transition for smooth toggling instead of using React animation libraries

Any tips will be appreciated

šŸ™ šŸ’

Community feedback

Sulemanā€¢ 750

@legion40216

Posted

Hey so looking at the Article section, u have placed padding on both elements individually Article_body and Article_footer it could be best if you placed the padding on the Article_section instead and give Article_body{ margin-bottom: 0.7rem} for consistency

0

Mehdiā€¢ 990

@siavhnz

Posted

@legion40216

Hi dear Suleman

Thanks for checking out my solution, padding in Article_footer is necessary because we have a state on different resolutions like mobile for showing sharing icons, if I give that padding to Article_section my Article_footer loses its look when the user clicks on sharing button. please check my solution in mobile resolution and hit the sharing button.

1
Sulemanā€¢ 750

@legion40216

Posted

@siavhnz i see... yeah, your right...

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