Product-preview-card-component-main

Community feedback

• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Hello and congratulations finishing this challenge, maybe I can help you with a few tips and fixes for future projects!

  1 - If you want to get your component on the center of the screen, you can get it with just a few lines of CSS, first of all, remove the margins from your .container class, then add to the parent element (the body) a heigth: 100vh and some flex like this:

  body {
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
  }
  

  Those styles will get your component into the center of the screen with no need of using margins!

  2 - It seems that your background-image has a fixed size of 400px, when going into a bigger screen, it falls a bit a lot, a great property to fix this kind of issues is background-size: cover with this property it will cover the whole container!

  3 - Regarding the img, try using an html img for this type of cases, you can use the <picture></picture> tags and inside use the <source></source> to define 1 source for each image depending on the screen size!.

  4 - An my last suggestion is to use more html tags like main section aside ... in this project isn't much important but for future projects try to give more semantic tags!

  Anyway this is a nice start for you as a responsive design project, congratulations and I hope that my feedback helped you!

  11

  Marked as helpful