Flexbox

Community feedback

• 

  Rohit Kumar Saini•270

  @rockingrohit9639Posted over 2 years ago

  Hey @Soto-J

  I saw your submission and found some issues. I am giving you some suggestions which will help you in improving your design.

  Suggestion 1

  Instead of giving the class card-container to the body give this class to the div inside body. Then you can give the following styles to this class -

  .card-container {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  This will make sure that all your content is in the center of the screen. Then you can give property flex:1 to both of your sections inside the main. This will make sure that both of your sections have equal width.

  Suggestion 2

  To make the overlay effect you can do the following.

  • Add an empty div as <div class="overlay"></div> in your picture section.
  • Add the following style to picture section

  .picture {
      position: relative;
  }
  

  Then you can give the following styles to overlay

  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: hsl(277, 64%, 61%);
      mix-blend-mode: multiply;
  }
  

  You can also try different values of mix-blend-mode.

  I hope this will help you in improving your design.

  Marked as helpful

  1