CSS flexbox

Community feedback

• 

  Muhammadh•1,140

  @Mr-jaw

  Posted over 2 years ago

  Great job on completing the challenge 🔥

  I have some tips for you to improve the best practices in coding and improving accessibility

  HTML 📄

  • Always provide the <img> tag with meaningful and understandable descriptive text about what the image is about in the alt attribute. to improve accessibility.

  CSS 🎨

  To center the component in the middle of the screen and to make it mobile-responsive follow the following methods;

  • Add the following lines of code to the body element;

  body {
       justify-content: center;
       min-height: 100vh;
       padding: 1em;
  }
  

  • In the main element replace width: 20%; with max-width: 15em; (you can change the value 15em to suit your width). And remove margin: 1rem 0;

  • In the main .product element replace width: 100%; with max-width: 100%;

  Now it should have fixed the centering issue and mobile responsiveness 🔥👍

  It is a good practice to use CSS custom properties. learn more about it here

  I hope this was useful 😊

  KEEP IT UP

  00

  Marked as helpful
• 

  Gaurav Pratap Singh•360

  @gauravsingh1281

  Posted over 2 years ago

  Hey Karen Lourenço, congratulations on completing this challenge 👏🎉.

  I have seen your code, and I want to give you some suggestions to improve your code. You didn't use the border-radius property and cursor pointer property on the hovering effect of the Equilibrium image, and hovering effect on the Equilibrium text and the avatar's name as mentioned in this challenge when a user hover this element there should be a hovering effect and cursor which make your website more interactive.

  00

  Marked as helpful
• 

  Hassia Issah•50,410

  @Hassiai

  Posted over 2 years ago

  To center the main on the page using flexbox, add min-height:100vh and justify content: center to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  00

  Marked as helpful
• 

  Karen Lourenço•380

  @KarenMascarenhasLourenco

  Posted over 2 years ago

  Thanks for all the feedback I received. I am happy with the support and I am studying the proposed solutions. You guys are awesome!

  20