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

Responsive preview card with Grid

@TiagoRidev

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


Hi everyone.

This project is responsive, has made with HTML, CSS and Grid layout. Could you give me some feedback?

Thanks.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hey there,

congrats on completing the challenge successfully! Looks great. One suggestion would be to avoid using margin: 12.5em auto to place the item on the center of the page. A better practice would be using display: flex; align-items: center; justify-content: center; .In general it is better to not to hard-code any widths, heights, margins etc because it might look good on one browser size but might run into issues on other devices. Keep up the good work!

Marked as helpful

0

@TiagoRidev

Posted

@visualdenniss Your suggestion it was important for me, because I really had difficulty to center this container. Thanks for the feedback.

0

@rezis-portfolio

Posted

Nice try, really good one Tiago.

I have some tips for u :

if u change in media query grid-templete-column to just 1fr it will fit really good, also to change img to mobile size u can use display : none and after make it block and replace.

u can check my solution and see how I did.

goodluck.

0

@TiagoRidev

Posted

@rezis-portfolio thanks for the feedback.

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