Submitted 7 months ago

Blog preview card with flexbox

BDWNAV•50

@BDWNAV

Preview site View code

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?

My use of flexbox, as it helped me greatly position the items in the ideal areas.

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

I felt this project went very smoothly compared to my other project I did before this.

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

I just want feedback on what I can possibly improve on.

Community feedback

Grego•1,310

@Grego14Posted 7 months ago

Hello! Congratulations on finishing the challenge.

Here are some recommendations:

For the .title element it would be better to use a <h1> element instead of <p>.

Also remember to add an alt attribute to the image, even if it is empty.

To align the .learning-card I recommend doing it directly from the parent styles, in this case the <body>.

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column-reverse;
}

And you must delete the styles that you added to the .learning-card

.learning-card{
  position: fixed;
  top: 50%;
  left: 50%;
  transform:
  translate(-50%, -50%);
}

When all sides of the border are equal, there is no need to make styles for the 4 sides

  border: 2px solid hsl(0, 0%, 7%);

I hope this helps!

Marked as helpful

BDWNAV•50

@BDWNAVPosted 7 months ago

@Grego14

Thank you so much for the help, but why do I delete all the styles from the learning card? As that is the parent div I have that stores all the elements inside.

Grego•1,310

@Grego14Posted 7 months ago

@BDWNAV Sorry I didn't explain, I meant that only the styles you used to align the learning-card element, these:

.learning-card{
  position: fixed;
  top: 50%;
  left: 50%;
  transform:
  translate(-50%, -50%);
}

Marked as helpful

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