1 attempt, product-preview-card

Community feedback

• 

  Alexander Gusev•170

  @WaRaGiSmYnIcKnAmEPosted about 1 month ago

  Your solution is not very similar to what the challenge offers...

  Here are my suggestions for a fix:

  • To begin with, I recommend using the <main> tag for the main content of your page.
  • The header tags <h1>, <h2>, ..., <h7> should go in order to simplify navigation on the page.
  • You have a lot of values changing in px, which can have a bad effect when scaling the page and on mobile devices. For values that are the same everywhere, this is still acceptable, but it is better to set the dimensions and margins using em and rem
  • You are abusing flexbox and because of this, the content is constantly trying to move somewhere. Try to cram all the text into display: block, and let the card itself remain display: flex. Everything inside will be easier to arrange when the elements behave like blocks
  • For mobile devices, you only need to change the image according to the media request and change the direction of the flex-direction: column
  • To the question of the picture. Use the <picture> tag to use a media request to change the image depending on the screen Widths. Example:

  <picture>
      <source srcset="./images/image-product-mobile.jpg" media="(max-width: 640px)">
      <img src="./images/image-product-desktop.jpg" alt="Product bottle image">
  </picture>
  

  <source> is responsible for an alternative path for <img> under specified conditions. Also, do not forget to specify an alternative text alt="Product bottle image".

  Keep making up more and you will come to the top!

  Marked as helpful

  0