React Results Summary

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • It seems like you might be repeating code in your media queries, you can create a media query for your responsive styles and adjust the specific properties that need to change based on the screen size.

  • Encourage adopting a mobile-first approach to build responsive solutions more efficiently. Start by styling for smaller screens first and then use media queries to add styles for larger screens.

  • Instead of using position: absolute for centering, consider using Flexbox. Wrap your component in a parent container and apply display: flex, justify-content: center, min-height: 100vh, and align-items: center to this parent. This will center your component both horizontally and vertically.

  • Avoid using viewport width units like width: 54vw; or min-width: 27vw; for your components. If the screen is very wide, your component will also become too large. Instead, use width: 100%; and set a max-width to restrict your component from growing beyond a certain width.

  • Instead of setting a fixed height with vh, allow the height to be determined by the content within the summary-container. By removing the explicit height, the container will adapt to its content and avoid potential issues with proportions on different screen sizes.

  I hope you find it useful! 😄

  Happy coding!

  2