Skip to content
Submitted 12 months ago

Responsive Preview Component with CSS Flexbox and Media queries

Clinton•100
@eghosaclinton
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Vedant Thorat•60
    @vedant027Posted 12 months ago

    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
    @eghosaclintonPosted 12 months ago

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

    0
  • ronnypdev•70
    @ronnypdevPosted 12 months ago

    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
    @eghosaclintonPosted 12 months ago

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

    1
    ronnypdev•70
    @ronnypdevPosted 12 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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