Product Preview Card Component - Main

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">.

  • It's not necessary to wrap each element inside a div tag, you can use the element directly.

  • The element <div class="addcartbutton"> should be a button and not a div with a anchor tag inside.

  CSS 🎨:

  • You should simply use min-width in the media query, I feel like you have repeated many styles without realizing it, so remove the media query with max-width and simply keep those styles as base styles, for example:

  /* NOTE: Remove this media query */
  /* @media only screen and (max-width: 35em) */
  
  .right-col {
      background-color: var(--white);
      padding: 1.3rem;
      margin: 0;
      width: 100%;
      height: 100%;
      border-bottom-left-radius: 0.6em;
      border-bottom-right-radius: 0.6em;
  }
  
  @media only screen and (min-width: 35.1em)
  .right-col {
      max-height: 22.7em;
      min-height: 22.7em;
      max-width: 15em;
      /* NOTE: These styles are repeated in the previous media query, if you remove the media query, there's no need to write them again. */
      /* background-color: var(--white); */
      /* margin: 0; */
      /* padding: 1.2em; */
      /* width: 100%; */
      /* height: 100%; */
      . . . 
  }
  

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0