Product Preview Card

Community feedback

• 

  Peter Paul•100

  @heyitspieterPosted over 1 year ago

  Hi Maria!

  Congratulations on completing your first project. Just a couple of things to note that could be of help to you.

  • When creating responsive layouts, by all means you should try to avoid using px units, reason is px are absolute units and they constrain/lock your overall design rather than allowing your website/design to auto adapt depending on your user's preference. You can read more on this here and here

  • Secondly, I am probably sure you have heard of flexbox and css grid. Even if you haven't yet, my point is layouts like this are best created with grid, reason is because flexbox uses what is called intrinsic sizing on its elements whereas with grid each element takes up equal space regardless of it's size. You also get the advantage of auto responsive layouts with things like auto-fit,minmax & auto-fill. More on this here

  Marked as helpful

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component.

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .main {
     margin-top: 100px;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  Marked as helpful

  0
• 

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  Hi, Maria

  You did a good job.

  To make the site responsive here a way to do it:

  @media screen and (max-width:768px){
  main{
  flex-direction:column;
  

  I also noticed some issues in the style so here some improvement:

  .img{
  border-top-left-radius:8px ;
  border-bottom-left-radius:8px ;
  }
  .container{
  border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;
  }
  

  And in text3 class you don't need to use width property.

  Tip

  It's better to use relative units rem ,em than absolute units px that helps to make the site nice in different screen sizes.

  Again you did great job:)

  good luck.

  Marked as helpful

  0