Responsive Product component page with HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <section class="product-container"> with the main tag, <h3> with <h1> to fix the accessibility issues.

  There is no need for a min-height: value in .product-container, a padding value, margin value and margin-inline value.

  There is no need for min-height value in .image-container and .info-container, Give .info-container and .image-container a width 50%.

  To center .product-container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Fidelis Adaikwu•40

  @DexFAPosted over 1 year ago

  @Hassiai Thanks for your feedback, I really appreciate it. Didn't think anyone was going to respond. This is cool.

  I've implemented the corrections you said but now my image disappears completely cos I didn't use an image element, I only set a background image for the .image-container section. Is this approach wrong?

  Should I introduce an img element into that section?

  Thanks a lot once again for taking out time to reply a novice like myself.

  0
• 

  Fidelis Adaikwu•40

  @DexFAPosted almost 2 years ago

  Thanks for your feedback, I really appreciate it. Didn't think anyone was going to respond. This is cool.

  I've implemented the corrections you said but now my image disappears completely cos I didn't use an image element, I only set a background image for the .image-container section. Is this approach wrong?

  Should I introduce an img element into that section?

  Thanks a lot once again for taking out time to reply a novice like myself.

  0