Responsive Product Card Page Using Flexbox and Mobile First Design

Hello Amy,

To make your layout simpler you can make a <div class="container"> and wrap your entire component in that div. Also, make sure to wrap that container inside the main element and remove all the styling for that main.

<main>
    <div class="container">
      <div class="your-component"></div>
    </div>
</main>

To center you component, add this style to the container

.container {
    max-width: 600px;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
   align-items: center;
    justify-content: center;
}

Make it a display of flex and flex-direction to column to center your component in the screen.

Now, all you need to do is to style your component. The easiest way to achieve this is using flexbox and grid. I recommend flexbox for this case.

   .component {
       display: flex;
    }
   .hero-img {
      flex: 1;
   }
   .product-desc {
      flex: 1;
}

Now, to make it mobile responsive use media query to set the flex-direction of a component to column.

@media (max-width: 600px) {
       .component {
          flex-direction: column;
       }
}

And that's it. Congratulations on making a step on this challenge. If you think this helps you a little. Please consider to marked this comment as helpful😊.

If you have any questions feel free to reply on this comment😊

HEY AMY!

Congratulations on completing your first challenge :)

I love the remembrance of your solution to the design, nice.