A Blog Preview Using CSS FlexBox

Community feedback

• 

  Adrian Trandafir 🎮•330

  @XenoMee

  Posted over 1 year ago

  Hello Aisha! Your solution looks great and almost like the design. Great job 👏

  I might have a few suggestions for you to improve it:

  • Set a 100svh size for the body's min-height property so that it covers the whole screen and help you center your card in the middle of it.
  • You can use Grid for the body to center your card since you can do it with only 2 lines of code.
  • You don't need to set a display of flex and a flex direction of column on the card's container since the content is stacking by default on top of each other.
  • You can use max-width: 100% and display:block rules for all the image elements whenever you start a website from scratch. This makes the images be more responsive on different screen sizes.
  • For your div container, you can set a max-width instead of a normal width. That way, you allow your image to shrink for small devices and cannot grow more than the max-width value you set.
  • For your problem, to put the profile picture image and the name together, remove the justify-content:space-between. This will put your flex items at the far edges of the card. Just use align-items: center and add a gap of 1rem.

  Hope this information helped you 😊

  Happy coding!

  10
• 

  Bhupender kumar•60

  @Bhupender-kumar455

  Posted over 1 year ago

  Just make the body display flex and then justify content centre and align item centre. It will make your card to go on centre both horizontally and vertically

  00