Skip to content
Submitted 3 months ago

Responsive article preview component

Mikhil Desai•200
@mike15395
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

It took a lot of time to complete the mobile footer toggle functionality, I am proud that somehow i completed it.

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

Writing JS code for mobile footer was challenging, i took help of stack overflow to fix my issues.

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

There is bug in my code, when i resize window to dekstop view from mobile view then last text section disappears. I don't know why? please help me fix it. Also the solution is not pixel perfect, help me achieve close to it.

Community feedback

  • Tuna Erten•360
    @tunaertenPosted 3 months ago

    Congratulations on completing this challenging task! 👍 👏

    • The icons are the same in both mobile and desktop views, so there's no need to rewrite the entire section in HTML. You can hide the unnecessary parts by setting their display property to display: none This way, you can adhere to the DRY principle. The issue between desktop and mobile views stems from this.

    -Additionally, the sizes of the images you used differ from those in the design. You might want to pay a bit more attention to this.

    Good Luck ✌️

    0
  • Teodor Jenkler•3,800
    @TedJenklerPosted 3 months ago

    Hi @mike15395,

    Nice project! I noticed that you use a hover effect to show the social icons on desktop. While that works, enhancing the user experience by allowing users to click on the icons to open them and click outside to close them would be a great improvement. You can achieve this with DOM manipulation.

    As an extra challenge, consider adding hover effects on the icons. To do this, use the <SVG /> tag and style it with CSS. On mobile, I’d also suggest making the popup absolute so it doesn’t push down your component when clicked.

    Hope this was helpful!

    Best, Teodor

    0

Please log in to post a comment

Log in with GitHub

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