Skip to content
Submitted 1 day ago

Responsive article preview component

P
Mihailo Sparic•260
@MihailoSparic01
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?

Next time, I won't underestimate any challenge, no matter how easy it seems. Because of my arrogance, I was in a hurry to finish it so I could jump on to a new challenge, and I messed everything up, so it took a lot longer than it should

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

Working with pseudo-elements to create a small triangle below the share button and center it, as padding wasn’t included when using left: 50% and translateX(-50%). I had to experiment with different values manually.

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

General layout in HTML and JS Also, if you have any other suggestions, please feel free to comment. I will be happy to listen to and apply every advice

Community feedback

  • Kuvashnee Naidoo•370
    @KuvashneeNaidooPosted 1 day ago

    Hi @MihailoSparic01

    Excellent work on creating the article preview component. I commend you on managing the display and hiding of the "share" section when the share icon is clicked. It enhances the interactivity of the component. ⭐👏⭐

    One aspect I recommend is adjusting the preview card to be centered on the page, as it's currently slightly above the center. To achieve this, you can modify the CSS for the body element:

    • Use flexbox on the body to center the card both vertically and horizontally.
    • Remove the padding-top: 16rem; to prevent the card from being pushed down.
    • Apply justify-content: center to horizontally align the content within the flex container, keeping it centered across the page.
    • Apply align-items: center to vertically align the content, ensuring the card is centered from top to bottom.
    • Use height: 100vh to ensure that the body takes up the full viewport height.
    • Use margin: 0 to remove any default margin that might offset the card.
    body {
  background-color: #ecf2f8;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

    Otherwise, well done completing this solution! 🚀🚀🚀

    Happy coding :)

    Marked as helpful
    0
    P
    Mihailo Sparic•260
    @MihailoSparic01Posted 1 day ago

    @KuvashneeNaidoo Thanks a lot. just did that and pushed changes. I also generated a new screenshot; now it is centered

    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