All comments

• 

  Ahmar A•20

  @Ahmer010Submitted about 2 years ago

  I couldn't figure out, how to center it in the page?

  

  most of the use their was of flex box

  2

  40
  

  Duchessa•70

  @duchessa01Posted about 2 years ago

  ** Hello!**

  • I suggest using <main> instead of a div class named Main

  Little tip: never use uppercase when naming classes.

  • To center everything you need to add these properties to body:

  display: flex;  
  flex-direction: column;    */ is needed to display content in columns and not rows /*
  justify-content: center;   */ it align everything on the main axis /*
  align-items: center;   */ it align everything on the cross axis /*
  min-height: 100vh;   //an height is needed to align vertically or align-items won't work.
  

  Other than that I suggest:

  • Removing every width: fit-content; and height: fit-content; width: inherit; height: inherit; and instead just setting width: 100% height: 100%; in .product-img
  • You can set font-family: 'Montserrat', Arial; on body and remove it elsewhere.
  • Move the background-color of body from the HTML to CSS.

  Later on start adding the hover effect on the button and reading about indentation and how to properly format your HTML.

  Good job! I hope I was of help! :)

  Marked as helpful

  1

  This comment has received 1 replyShow