css flexbox, css

Community feedback

• 

  Arturo Simon•1,805

  @artimys

  Posted over 4 years ago

  Well done on the challenge Leonel. 👍👍 Looking over your css I can provide different ways to do something but overall your styling is simple.

  • Try adding the two background images to the body element as background-image. You'll probably want to tear your hair out but the key is to play with background-size first to show an acceptable size then position it with background-position.

  • Add both bg-pattern-card and hero image into a new div container. Set the bg pattern as a background-image and keep hero image as an image tag. Update position.

  • the width: 33% on your .card-footer-content .container is a fine solution. An alternative way is using the justify-content: space-around since your container is already using flexbox.

  .card-footer-content{
     display: flex;
     flex-direction: row; 
     align-items: center;
  
     // be sure to add left/right margin to your .container. to adjust outer spacing.
     justify-content: space-around;  
  
  }
  

  --

  Design feedback:

  • lower the font-weight for the "followers", "likes", "photos" text
  • reverse numbers 380K to 830K

  Keep it up 👍👍

  01