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 solution

Buci 40

@alphardhafiz

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


correct me if i'm wrong please :)

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Buci!

Congratulations for your solution!

I've some considerations about your html structure.

1.Note that you don't need 2 containers to hold the two div correspondent to the two columns, use only the main content to keep this elements.

2.If you work with percentage is hard to know how much big is the container, it should be around 750px/800px, I think percentage is better for the elements inside the container, so try to use a value around .container {max-width: 800px;} and the elements will have the percentage in base of this width.

3.Use flex-wrap for a better behavior in the price section, this allows the section to break the line automatically, .des-container .price {flex-wrap: wrap}

I hope it helps, keep coding!

1

Buci 40

@alphardhafiz

Posted

@correlucas WOW thank you so much for the feedback, i'll fix this and remember the second point that better do not use percentage for container

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