Responsive page using CSS Flex-Box

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi

  Good job on the challenge, just a few suggestion to make it more responsive you can add the following on the:

  .product {
      /* height: 60vh; */ **remove**
      /* margin: 0 auto; */ **remove**
      display: flex;
      max-width: 700px;
      /* flex: 1; */ **remove**
      /* background-color: black; */ **remove**
  }
  
  .imagefile, .description {
      flex: 1;
  }
  
  .image {
      width: 100%;
  }
  

  On mobile make the following changes:

  .product {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      /* flex: 0.5; */ **remove**
      margin: 2rem;
  }
  

  Hope the above helps, let me know if you have any other questions.

  0

  ---

  

  Hawi Girmachew•250

  @HawigirmachewPosted about 2 years ago

  @hyrongennike thanks I will try it

  0