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 landing page with css flex

Squashim 350

@Squashim

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


The most difficult thing was making the image and it's parent container responsive. My question is how to improve the responsiveness of my website. What are best practises for adjusting height, width with max-width, min-height etc. Thanks for your feedback.

Community feedback

Fatlind Shehu 2,230

@fatlindshehu

Posted

Hi Squashim, Overall you did a good job, here are some things I think you might check:

  1. "description-container" has no background ( it should have #fff) also the size is not set properly, 2. Try using flexbox properly in the main container and set the image and the description container both 50% of width!
  2. Remove margin-right from 'img-container'!
  3. In order to space the elements between the description container, give the container an overall margin from all sides.

Marked as helpful

1

Squashim 350

@Squashim

Posted

@fatlindshehu Thank you for your feedback, I fixed these things and now my site looks so much better!

0
Fatlind Shehu 2,230

@fatlindshehu

Posted

@Squashim It looks great indeed, keep up the good work!

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