Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Useful Way to use (grid) HTML & CSS

@ahmedJabban

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did not find any difficulty and that makes me more confident, But.....: I just want you to tell me if there is any problem with my code?, or if you notice that my code is complex (Not easy to understand its logic)?.

Community feedback

@placeteno

Posted

Hi @ahmedJabban,

I was looking at your solution and it looks good in desktop view! However, there's a small error in your media query that prevents the card to switch to mobile view. You wrote @media (width:375px) but inside the parenthesis it should be (max-width: 375px). That should fix the responsiveness issue.

Also, I noticed in your CSS that you used the class .containor all the time when writing the rules for the other classes. This is not necessary because there's no overlap. If you had two, let's say, .price classes in two different containers, then it would make sense to specify which price, but that's not the case here.

I hope this is useful! And keep going! 😃

Marked as helpful

1

@ahmedJabban

Posted

@placeteno Thank you so much for your notes, I will fix the error now!.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord