Product preview card component

Community feedback

• 

  Steve•1,170

  @peanutbutterjllyPosted over 1 year ago

  for the body, add these styles:

  display: grid;
  place-content: center;
  height: 100vh;
  }
  

  What that'll do is put the content in the middle and make the body 100% of the view-height; hence using the vw unit.

  for your .section__one and .section__two classes, add:

  flex: 1
  

  what that flex: 1 property does is set the flex-grow and shrink values to 1 (its a shorthand for flex-grow: 1 and flex-shrink: 1) so both items can grow and shrink at the same time.

  you want to add that here so both items can take equal width/space.

  With that said, those solutions are for desktop, I didn't see how (or if) it would affect mobile.

  good job completing the solution!!!

  Marked as helpful

  1
• 

  Jahanzaib Bajwa•180

  @Jazzy486Posted over 1 year ago

  You can add the following code to distribute space evenly in the main div

  .main{ display: flex; }

  For the divs inside the main div

  .left-div, .right-div{ width:50%; }

  1