Product Preview Card using Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Monk, congratulations for your solution.

  Answering your questions:

  Your component isn't responsive due the fixed value you've set for the width for the container/columns. If you set witdth: 600px; for an element, the css will understand that the element should be the value(600px) you've set not more not less. Use max-width inside the .container so when you resize the window the container content could contract to fit the screen space. Note that you can also use min-width depending of the situation.

  Pay attention also to the container height, there's no need to set a height because the component height will resize with the spaces from the elements padding/margin as the h1, p, button. You've used height:100vh; inside the container and this will make the component grows a lots. Add min-height:100vh; to the body instead.

  I hope this helps you improve your solution, happy coding 👊

  Marked as helpful

  0