Skip to content
Submitted about 4 years ago

Article Preview Content with HTML, CSS & JavaScript

Melvin•270
@MelvinMelonGit
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Karim•590
    @yasssuz

    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 :)

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