A Blog Preview Using CSS FlexBox

Community feedback

• 

  Adrian Trandafir 🎮•330

  @XenoMeePosted about 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!

  1
• 

  Bhupender kumar•60

  @Bhupender-kumar455Posted about 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

  0