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 Component with CSS Flexbox and Media queries

Clinton 100

@eghosaclinton

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


No questions.

However, If you have better ways/ ideas to approach Responsive Design as well as CSS best practices, feel free to tell.

Community feedback

@vedant027

Posted

For device width between 770px and 425px the container doesn't remain responsive. something which you can look into otherwise its good

1

Clinton 100

@eghosaclinton

Posted

@vedant027 Thanks. Just noticed that, will fix as soon as possible

0
P
ronnypdev 50

@ronnypdev

Posted

Hi @cliton

Good job! but some suggestions for the images instead of using two <img /> elements try something like this. --> https://www.w3schools.com/html/html_images_picture.asp

keep up the good work!

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
  </picture>
1

Clinton 100

@eghosaclinton

Posted

@ronnypdev Thanks for the tip! Never knew it could be done this way...

1
P
ronnypdev 50

@ronnypdev

Posted

@clintt-09 you welcome. I'm here to help :-) happy coding

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