Responsive product preview card component with only html and css

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted about 2 years ago

  Hey DlnosMpo, Well done! your solution looks perfect but there are some improvement which could be made

  1. For aligning the whole content to the center you can replace .container{ width: 600px; height: 450px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%);} with body{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } and you can see content is well aligned to center of the page.

  2. You can use <picture> tag when you want to show different images at different screen sizes and this will not require setting display: hidden or display: block property to the images.

  hope this helps...

  Marked as helpful

  0

  ---

  

  DInosMpo•210

  @DinosMpoPosted about 2 years ago

  @thisisharsh7 thank you my friend i will learn about the flex and the picture tag

  0
• 

  Franco Juarez•220

  @JuarrisonPosted about 2 years ago

  Hello, DinosMpo. Congratulations for your work. From what I can see, the HTML tag tag is missing the alt text. This text is a clear description of the image that helps improve the accessibility of the web page. Here is some useful information so you can improve this aspect of the code: https://www.w3schools.com/tags/att_img_alt.asp I hope this has been helpful. Greetings.

  Marked as helpful

  0

  ---

  

  DInosMpo•210

  @DinosMpoPosted about 2 years ago

  @Juarrison thank you my friend i will try not to forgot the alt tag

  0