Responsive product review card

Hi @delacruzralph!

What I could suggest is to code mobile first your CSS and use relative units such as em, rem, %, etc. After coding everything on mobile display then you could now adjust the size for the bigger displays using media query and max-width. This will also lessen redundant codes and a smoother load for mobile users.

Using max-width means you are setting your element to how wide it could only go. Let's say you wanted it to be until 800px wide only for desktop, then set max-width to 50rem.

Also on height, I just let it be. I don't usually set a specific height for my element unless I need it to be specific.

You could also checkout (w3schools.com) for reference.

P.S. For accessibility warnings, you should use semantic elements or give your elements role, name and value. You could check it out here to understand more on accessibility. (https://www.w3schools.com/accessibility/index.php). I'm also currently learning it. 😁

Hope these helps you!

I mostly use a combination of percentages, em and rems, and vw and vh (probably precentages more than these) and never use pixels for sizing, as it ruins the sizing when taking responsive design into mind.

Have a watch on Kevin Powell's video on ems and rems: https://www.youtube.com/watch?v=_-aDOAMmDHI