Flexbox Column, Pure CSS, background blending mode

Community feedback

• 

  spyder•315

  @ratan17Posted over 3 years ago

  avoid using pixel values for sizing the elements, use relative values such as vh,vw, %, em,rem

  link for relative units : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  if you update the following values your .row container will be exactly centered on the screen :

  1. body element :

  a ) remove these properties align-items: center; align-content: center;

  these properties don't have any effect in your code since they work only when you have set the element to display:flex

   b) set height to 100%
   c) lastly set flex properties to center the content 
  

  this is what it would look like if you update body element as above :

  body { background-color: hsl(233, 47%, 7%); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

  2. .row container - a) remove margin and padding b) update width to 65%

  this is what it would look like if you update .row conatiner as above :

  .row{ display: flex; align-items: center; align-content: center; width: 65%; }

  And if you are struggling to understand flexbox , play this flexbox zombie game by mastery games. It helped me alot to understand flexbox

  link: https://mastery.games/flexboxzombies/

  Marked as helpful

  0

  ---

  

  MaryF•350

  @JanselinPosted over 3 years ago

  @ratan17 thank you a lot for all your tips! i will do everything you recommended!

  0