Responsive landing page with flex

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 2 years ago

  Hi Jasham .

  I will add more to my other communication in the slack channel:

  • the body element is usually set to min-height: 100vh , this allows scrolling when content does not fit. To center the items in the body , do the following

  body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  

  Further adjustments

  .main {
  /*  min-height: 97vh;
    display: flex;
    justify-content: center;
    align-items: center;  */
  }
  .image_wrap {
  /*  width: 50%;
    height: 100%; */
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background-image: url(./images/image-product-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover; 
    flex: 1 1 50%;
  }
  
  .content_wrap {
   /* width: 50%;
    height: 100%; */
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: var(--White);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 50%;
  }
  .wrapper {
  	/* height: 25rem; */
  	display: flex;
  	flex-direction: row;
  	max-width: 35rem; // take note of this change
  }
  

  check and remove all set heights on the elements such as with the class wrapper

  Marked as helpful

  1

  ---

  

  Jasham•80

  @jashamPosted about 2 years ago

  @ChamuMutezva Thanks. Your feedback is too valuable I will surely correct it.

  I just curious to know what is the difference between

  width: 50%;height: 100%; and flex: 1 1 50%; because it does the work same I think. Please share some knowledge about this.

  0
• 

  Franco Juarez•220

  @JuarrisonPosted about 2 years ago

  Hi @jasham. I wanted to congratulate you for the work you did on this challenge. Here's a little suggestion: use more semantic HTML tags. This would give better accessibility to the page. In this particular case, you could use tags like <article>, <footer>, <header>, <h1,h2,h3...>, among others. I hope this comment is useful to you. Greetings and congratulations for the challenge! Looks great.

  Marked as helpful

  0

  ---

  

  Jasham•80

  @jashamPosted about 2 years ago

  @Juarrison Thanks. Your feedback is too valuable I will surely correct it. Learning in a public is great way to learn. Again Thanks a ton.

  0