Not Found
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502

Submitted

Responsive Product Preview Component | Flexbox

Jota 30

@JuanGelabert

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 there! I have to say i struggled a lot with this one when i had to manage flex-items sizes. Please give me your feedback and if you know another preetier solution i will thank you a lot

Community feedback

@MoggStephen

Posted

Hi there!

Overall nice component.

To fix your sizing issue, you have a max-width of 95% set on your mobile version in .card. You should measure the size of the container in designs and set the max-width to that amount. If you set a width of 100% at the same time the container should be nice and responsive.

For this component there are desktop and mobile versions of the image that should be switched between at your breakpoints.

Your method of centering the component in your media query can be used for your mobile version too! For small components I think this method is fine, but typically centering elements is done with flex and justify-content-center/align-items-center especially in larger projects and challenges.

Other than that you matched the designs pretty well!

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