Skip to content
Submitted over 2 years ago

Responsive Product component page with HTML and CSS

Fidelis Adaikwu•40
@DexFA
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found it difficult to make the 2 sections of my component (the image section and details section) maintain the same height while resizing the viewport. Please help.

What are the best practices for setting default page styling?

Code

Please log in to post a comment

Log in

Community feedback

  • Hassia Issah•50,410
    @Hassiai

    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
  • Fidelis Adaikwu•40
    @DexFA

    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.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord