Frontend Mentor | Product preview card component

Community feedback

• 

  Rahul Kumar•570

  @rahulkumar215Posted 9 months ago

  Hello Ali Mostafa👋

  Congratulations on successfully completing the challenge! 🎉

  I have a suggestion regarding your code that I believe will be of great interest to you.

  h1, h2, h3, h4, h5, h6, p { padding: 0px; margin: 0px; }

  Here you are setting the margin and padding to 0 on all heading and paragraph, this can be done in with best practice like this

  *{ margin:0; padding:0, box-sizing: border-box;}

  or more advanced

  *, *::before, *::after{ margin:0; padding:0, box-sizing: border-box;}

  It is perfectly fine to set the height of the body The best way to do it is like this

  body{ min-height: 100vh }

  this tells the browser to set the minimum height of the body to 100 view port height and If the height it bigger than 100vh then it will simply take 100% of the total height.

  same here

  .design { height: 700px;}`

  change it to

  .design { min-height: 100vh;}`

  Here

  .img-cont { width: 50%;}

  You are using width: 50% to set the width of the image container, However if you are using flexbox on parent container then you can simply set the width of the child container like this

  .img-cont { flex: 0 0 50%;}

  and set the text container to

  .text-cont { flex: 1;}

  this will tell the text container to grow as much as it can, and it will simply take the remaining space left in the flex container ( remaining 50%).

  Things I would recommend to learn

  Flexbox tutorial

  Basic concepts of flexbox

  A Complete Guide to Flexbox

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  If you need any feedback or suggestions, I am happy to help

  Have Fun Coding!

  Marked as helpful

  1