Blog preview card using CSS Flexbox

Community feedback

• 

  P

  Martin Mwaka•390

  @TemceoPosted 8 months ago

  A very good replication of the brief - well done.

  A few minor areas for improvement -

  To make the container centred on all views (especially mobile) place the display flex on the body and make the width of the container a percent of the body, with a max width in pixels - see example below -

  body {
    font-family: "Figtree", sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container {
    padding: 1rem;
    width: 90%;
    max-width: 375px;
    margin-inline: auto;
  }
  

  Also consider using css variables for your colours as it makes it easier to remember - see example below:

  :root {
    --clr-white: hsl(0%, 0%, 100%);;
  }
  
  .content {
    background-color: var(--clr-white);
  }
  

  You can read further on css variables here - mdn - css variables

  Marked as helpful

  1
• 

  P

  Aminpatra•290

  @AminpatraPosted 8 months ago

  Your solution is very good in this one, but here is a tip to save time. Instead of repeating the same color percentages you can define a :root selector, and you can call its elements by typing -> color: var(--"the color name"). So the final result for this project will be like this : ''' :root { --Yellow: hsl(47, 88%, 63%); --White: hsl(0, 0%, 100%); --Grey: hsl(0, 0%, 50%); --Black: hsl(0, 0%, 7%); --font-mid: 500; --font-bold: 800; } ''' Sorry I don't know yet how to format texts in this feedback thing :)

  Marked as helpful

  1