Blog-preview-card with just flexbox

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 7 months ago

  Hey ! Great Work Out there i just notice that the avatar image is not horizontally aligned with the text , i want to suggest to use display : inline-block and vertical-align : middle in the .avatar-container img by adding this two css property you can achieve to align the image and text horizontally centered . that's all happy coding !

  alternative to display : inline-block is you can also use the flex-box that i see you use on other element you just need flex-direction of row and align-items : center and add gap for spacing of image and text :)

  .avatar-container img {
    max-width: 100%;
    display: inline-block; // add this
    vertical-align: middle; // add this
  }
  

  avatar-container {
    width: 28px;
    margin-right: 12px; you can remove this or just adjust 
  }
  

  Marked as helpful

  1

  ---

  

  Zeyad Mohamed•90

  @ZeyadMohamed5Posted 7 months ago

  @AkoToSiJeromeEh Thank you so much! i felt like something is wrong with my avatar icon but i just ignored it because i am already used my align-items: center; thanks

  0