Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card Component

@manosanti

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


What did you find difficult while building the project?

  • Well, what I had the most difficulty while I was building the code, I believe, was the selection of classes for each <div>, also in some CSS properties, I'm not sure if the way I did it was the most correct, but in some way, it worked, but I would like, if possible, someone to review my code and inform another "more correct" way to build.

Do you have any questions about best practices?

  • Yeah, I do. I had a lot of trouble making the website responsive. I have no experience with this, so when I had to make the card look like the image suggested, I failed, I tried various ways but couldn't get the image on top on responsive mode.

Community feedback

@J-HernandezM

Posted

Hi Lucas

The way i put the image up in mobile was using display grid, in the desktop media querie i used in the card selector the CSS propertie grid-template-columns and assigned two columns with their respective sizes. In the mobile media querie i used the propertie grid-template-rows assigned two rows, first the image and second all the texts.

I apologyze if my english is not the best

0

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