React Results Summary

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!