Skip to content
Submitted over 3 years ago

Article Preview Content with HTML, CSS & JavaScript

Melvin•270
@MelvinMelonGit
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

Hi there! Thanks for viewing my solution :)

I have a few questions:

1 - I spent most of my time struggling to fit the image into the card itself. May I know when do I use "auto", "inherit", or use a hard-coded value for the length or width of an image - (in order to fit it into the parent div)?

2 - I treated the avatar image, text and arrow as a single flexbox container. Is there a way I can align the avatar text without using a negative margin?

3 - How may I improve my code?

Thanks for replying!

Community feedback

  • Karim•590
    @yasssuzPosted over 3 years ago

    Hello Melvin.

    Awesome build, here the answers to your questions:

    • It's better if you use max-height: 100%. The inherit keyword specifies that a property should inherit its value from its parent element. If the parent element had a different value, your code would look totally different.
    • Yes you could. Inside class="avatar" create another div an put inside the h2 and the img. This should work perfectly.
    • You did a very good job, your code is nice and clean. I would just suggest using BEM for naming your classes. This article will help you to get started.

    Happy coding and please upvote my comment :)

    1
    Melvin•270
    @MelvinMelonGitPosted over 3 years ago

    Hi @Galielo-App,

    Thanks for your detailed reply and link to the article! I will try that out in my next challenge. :)

    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