Product preview card using plain HTML and CSS and Media Queries

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Ivan, congrats on completing the solution of the challenge!

  If you don't mind I would like to give some feedback to your code.

  The responsiveness seems ok for me, but you can try to center your card in the screen without the need of margins, you already used flexbox and justify-content: center with align-items: center on the body, the only thing you were missing is the height: 100vh to set the height of your body to the whole viewport of the screen.

  Also would recommend you to add the image as an html instead of a CSS background, you can use a <picture></picture> tag with two <source> tags to conditionally render the mobile or desktop images depending on the width of the screen!, you can checkout how the picture tag works with some examples here

  Hope my feedback helps you, if you have any question don't hesistate to ask me!

  Marked as helpful

  0

  ---

  

  Ivan Lazarov•40

  @IdLazarovPosted about 2 years ago

  @DavidMorgade Thank you a lot! I will take those things into consideration!

  0