Blog Preview Card

Community feedback

• 

  Joshtemi0•180

  @Joshtemi0Posted 4 months ago

  Great work

  From the little I know

  You can set the card in the center by using

  .blog-content {
   position: absolute;
   top: 50;
   left: 50;
   transform translate(-50%, -50%);
  }
  

  And for midea queries it will that more time to explain it here so hope this is helpful at this point.

  0

  ---

  

  geomydas•1,440

  @geomydasPosted 4 months ago

  @Joshtemi0 the way you center cards is not reccomended as it may interfere with other transforms and messes up the z-index.

  instead, do this on the parent container or on the body since .blog-content is redundant and you should just apply the styles directly

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  you can also add min-height: 100vh for this case so it will be center in the entire viewport

  0

  

  Joshtemi0•180

  @Joshtemi0Posted 4 months ago

  @geomydas

  Thank you

  Run after me ?? 😄😄😄 Thanks again for the corrections.

  I was thinking of incase of multip thing in a webpage will the min-height not affect the next on under it?

  Don't know to to explain better

  0

  

  geomydas•1,440

  @geomydasPosted 4 months ago

  @Joshtemi0 yes using min-height: 100vh will affect the items under it but since this is just a single card with no other items nor siblings, it is okay to do so.

  0

  

  Joshtemi0•180

  @Joshtemi0Posted 4 months ago

  @geomydas

  Okay

  What about in other cases ?

  0

  

  geomydas•1,440

  @geomydasPosted 4 months ago

  @Joshtemi0 don't set a height? justify-content centers your element horizontally / vertical (if your flex-direction is column / column-revense) and align-items is the opposite. theres also justify-items and align-content but we won't dive deeper in to that. just learn some of the basic css and you will be okay, i can't explain everything inside a single comment. using flex allows you to use those properties

  0