Submitted almost 3 years ago

Article Preview Content with HTML, CSS & JavaScript

Melvin• 210

@MelvinMelonGit

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

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

@Galielo-App

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

Melvin• 210

@MelvinMelonGit

Posted almost 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. :)

Please log in to post a 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