Skip to content
Submitted 4 months ago

Blog preview card

Alex Enescu•170
@Alexandru-Enescu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

It didn't take me a lot of time to finish the challenge.

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

I was confused what is the most efficient way to adjust the size of the image.

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

I'm not completely sure if my code is maintainable. For example, is it more correct to add margin to each element or to use flexbox?

Community feedback

  • Juan•480
    @JEWebDevPosted 4 months ago

    Hello @Alexandru-Enescu!

    Well done! Let me answer your questions:

    1. What's the most efficient way to adjust the size of the image?

    I think the best way of adjusting the size of an image in this case is to make it full size of the parent element and adjust the parent element instead. like this:

    .img{
    min-width: 100%
}

    in this case you can wrap the image with a header tag.

    2. Do i add margin to each element or use flexbox?

    Using flexbox and gap will make it easier to make changes in the long run.

    Imagine you have 4 components like this and want to change the spacing a bit. using margin on each of them you will have to change it on each element of each card. if you use flexbox you only have to change the gap property of each card container in case they have different spacing.

    Happy coding!

    Marked as helpful
    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