Product Review Solution

Hi @vknir,

Nice project! Here are a few additional suggestions:

Centering a Div: Another way to center a div is by using position: relative on the parent and position: absolute on the child. Then, set top: 50%, left: 50%, and use transform: translate(-50%, -50%) to center it. While this method may not be necessary for your current project, it's a useful technique, especially when you need to ensure the element remains centered while also being able to overlap other elements. (Added it purely for fun :)

Responsive Design: I noticed that your design doesn't seem fully responsive at a 1000px width in Chrome DevTools. I recommend checking your project at various breakpoints using DevTools before finalizing it. Consider avoiding fixed widths and instead use max-width and min-width for better responsiveness. Heights can often be managed/replaced with padding and margins, reducing the need for fixed heights. Additionally, consider using rem or em units instead of px for more flexible and scalable designs. Note that em units inherit from parent elements, so use them with caution if not sure of their effect.

Keep up the great work!

Best, Teodor

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget abut min-height. You can use grid instead of flex too(with some changes). Hope you found this comment helpful :)