Product Preview Component | CSS Flexbox

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey @justinnvera. Congrats 🎉. You have completed the challenge.

  I have a little recommendation to center the card.

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: hsl(30, 38%, 92%);
      margin: 0;
      padding: 0;
      border: 0;
  
      /* Add this line & the card will be on center. */
      min-height: 100vh;
  }
  

  2

  ---

  

  Justin Vera•270

  @justinnveraPosted over 2 years ago

  @prantiknoor Thanks a lot for the feedback! I will implement this in my next project :)

  0
• 

  Sylvain•50

  @sylverdragPosted over 2 years ago

  Some suggestions:

  1. border-radius: You have border-radius in "main", and then you realized this didn't work as expected, so you added a border radius to the image as well. You can avoid doing that using "overflow: hidden;" on "main". This hides everything which goes beyond the area of "main"

  2. letter-spacing and small caps: Instead of spacing capital letters manually in "P E R F U M E", you can use CSS to get better control: font-variant: small-caps; letter-spacing: 0.2rem; This gives you a better control on the spacing, and it is more SEO friendly ("perfume" is a keyword, P E R... is a sequence of individual letters).

  3. You can declare only one type of display per element. If you declare more, only the last one applies: main .checkout button { display: block; display: flex; is the same as main .checkout button { display: flex;

  4. The original is split half-half between image and text. You can do that by assigning 50% to your ".hero-image-container" and adjust ".text" to include the padding (so about 45%). A better way to do it is to give the main container a width in rem and split it in half for the image and the text, that way it will scale, but you can also get the proportion exactly right.

  Anyway, good job on your first solution. I hope this helps.

  1

  ---

  

  Justin Vera•270

  @justinnveraPosted over 2 years ago

  @sylverdrag Thanks a lot for the feedback! These tips are very helpful and I will make sure to implement these into my next projects. Especially the text manipulation inside CSS instead of the HTML due to SEO. Thanks a lot! :)

  0

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @sylverdrag Really helpful suggestions🥰. I had to work hard to add border-radius on the 3-column-preview-component project. Some days ago I explored the overflow: hidden. Now, It has reduced a lot of pain. 😅

  1