Frontend Mentor | Product Review Card Component coding challenge solution

Solution retrospective

Again, I struggled a little with the responsive part of the development.

I missed the usage of the tag "<meta name="viewport" content="width=device-width, initial-scale=1">", which makes the page scale properly depending on the screen size/resolution, took me a while to figure that out, but all ended up being ok.

I also still didn't found a way to match the design text without using bigger font-sizes from the especified in the style-guide.md.

Community feedback

Tryt4n• 940

@Tryt4n

Posted over 1 year ago

it's better when you use del element instead of strike and also you can put actual price in strong or em element to emphasize. Also you supposed to have only one h1 element on the page so the title is ok, but price shouldn't be in h1 element even if you wouldn't have any one the page.
for responsiveness it's good to use clamp in CSS. Like: font-size: clamp(1rem, 3vw, 2rem); padding: clamp(0.5rem, 7vw, 0.75rem)

You can try with different numbers. First is for smallest and third is for biggest. Middle value is for change and it's supposed to by in vw but you can try with different numbers depending from screen size and values.

Marked as helpful

Jasson Jr.• 30

@JassonJr

Posted over 1 year ago

@Tryt4n Thank you so much for these tips, they're really helpful and I'll try to implement them as much as possible on the next projects.

I also used them a little bit to refactor the code of this solution, and removed the h1 tag from the price as you warned.

Product Review Card Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community