Display Flex centering Perfume challenge

Community feedback

• 

  Harshit Joshi•120

  @TheFoxianPosted over 1 year ago

  Hey Christopher, congratulations on completing the challenge.

  Here are my few findings, you have used two images and displaying one image with hiding another at media breakpoint makes sense but it is not a good practice, instead use HTML source tag. Read more about HTML Source tag.

  Other than this you have used display flex directly to the main tag. This is not a good practice, instead use a div inside of main and wrap all the content inside it and apply the respective css to that wrapper. Read more about centring any element using flex

  Although you have used max width 600px but there are few standard for media breakpoints. Please refer this for better understanding -

  1. 320px — 480px: Mobile devices
  2. 481px — 768px: iPads, Tablets
  3. 769px — 1024px: Small screens, laptops
  4. 1025px — 1200px: Desktops, large screens
  5. 1201px and more —  Extra large screens, TV

  Keep up the good work! Enjoy coding :)

  Marked as helpful

  1
• 

  generieyyc•160

  @generieyycPosted over 1 year ago

  Hello! I'm sharing the feedback i got before.

  For proper centering the container (whole card) vertically and horizontally, you can use code as:

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

  Hope that helps!

  Marked as helpful

  1
• 

  Tamana•210

  @Tamana123-2Posted over 1 year ago

  Hello Mr. Christopher Portorreal! Great job for completing the challenge. In your mobile design you could use grid, for being more flexible with desktop version instead of flex. You can add the image of desktop design in HTML file with a media of (min-width: 600px) and in you CSS file you could go with (grid-template-columns: 1fr 1fr) for making the perfume image and content side by side. Go ahead even if it is hard to get. Nothing is easy to achieve. Nice time.

  Marked as helpful

  1
• 

  P

  Luca Liebenberg•180

  @lucaliebenbergPosted over 1 year ago

  hello, just for some extra feedback:

  If you want to centre the card - for desktop and mobile - you can use /* display: flex; height: 100vh; justify-content: center; align-items: center; */

  This for the body element, you can target directly in css:

  body {

  }

  I hope this has helped!

  1