Responsive Product Preview website using html, Css

Community feedback

• 

  Mirjax2000•680

  @Mirjax2000Posted almost 2 years ago

  Hi i checked your challenge. at width 477px there is strange behavior with your picture. and after that when you go down with resolution picture doesnt center itself. or keeping aspect ratio. So at resolution around 250px i can see only green leaves. you should use some cover or contain, or keep width of your img element at 100% of his parrent. at 477px you lost border radius of ypur img.

  Rest is good, didnt check your Code, just solution and behaving. for example here is my solution https://eloquent-brioche-ee7a28.netlify.app/ just check: i try to keep at maximum looks as i get from figma. Actualy i used wrong technique with backround picture, i should use standart flexbox, but it teach me lesson how to use some flexbox stretch components and how to work with background picture.

  thx

  0
• 

  Jeroen Leijnse•1,420

  @jrleijnsePosted almost 2 years ago

  Hey there! Great job completing this challenge! 🎊

  I have some suggestions for your code that might interest you.

  HTML 📄:

  Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

  CSS 🎨:

  To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}. For more information on this topic, you can read the following article: PX or REM in CSS? 📘

  I hope you find my suggestions useful and good job completing this challenge!

  Keep it up and happy coding! 😃

  0