Responsive Blog Preview Card Using CSS Flexbox

Community feedback

• 

  Shivangam Soni•990

  @ShivangamSoniPosted 5 months ago

  Nice Solution, but there are a few areas where improvements can be done.

  Unnecessary use of Flex, With & Height

  For the Category Tag, you are using many CSS properties, whereas the desired result could have been achieved in an easier way. This is your code for the category

  .post-category {
     display: inline-flex;
     width: 82px; 
     height: 29px;
     border-radius: 0.25em;
     background-color: var(--yellow);
     justify-content: center;
     align-items: center;
     font-weight: 800;
  }
  

  This is how you could have taken advantage of the fact that the tag is a flex-child:

  .post-category {
    align-self: flex-start;
    padding: 0 0.75rem;
  
    border-radius: 0.25em;
    background-color: var(--yellow);
    font-weight: 800;
  }
  

  What I did is used the align-self property to align the element to the start of the parent flex-box. Secondly, I'm using padding to adjust the spacing required around the text.

  Default Styling

  Another point to notice is that in many places you haven't adjusted the default padding & margin of elements like body, h1, p, etc. Because of this, there is an uneven spacing within the card.

  You might want to look into CSS Resets, where we write some CSS that resets some of the default styling applied by the browsers. This is done because you will usually have your own styling needs, especially in case of Padding & Margin. So resetting some of the default properties just makes sure that no default styling affects our design.

  Semantic Tags

  I also recommend you to look into Semantic Elements & replace the divs with Semantic Elements instead. Read More about Semantic HTML

  Marked as helpful

  1