Product preview card component using CSS Flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  This is pretty good, especially your html structure shows great promise and good attention to detail

  You do have some issues in the way you're approaching layout, however. You should not be positioning components absolutely like this or setting explicit heights and widths. Hopefully these changes and notes I made in browser will help

  
  /* styles.css | https://product-preview-card-component-rho.vercel.app/styles.css */
  
  @media screen and (min-width: 800px) {
    .container {
      /* height: 420px; */
      /* width: 560px; */
      max-width: 560px;
    }
    .product-image {
      /* width: 50%; */
      note: Use the picture element instead so the browser can switch the mobile and desktop images for you;
      flex: 0 0 50%;
      note: wrap in a div and make the image height 100% and object fit cover so it doesnt get distorted;
    }
  }
  
  .container {
    /* width: 340px; */
    /* margin: 50vh 50vw; */
    /* transform: translate(-50%, -50%); */
    /* position: absolute; */
    max-width: 340px;
    note: max-widths should really be in rem; Try to use rem wherever you are using px now
  }
  
  .previous-price {
    note: Screenreaders have no way of knowing this is the old price, it will just be read out as normal. Add some sr-only text in to make it clear it's the old price';
  }
  
  // NEVER style on IDs!!! Use classes. 
  // Use padding to create the height of button not an exact height
  #add-to-cart {
    /* height: 45px; */
    padding: 1rem;
  }
  
  // make all img tags display block in a css reset at the start
  .product-image {
    display: block;
  }
  
  // center component on page
  main {
    min-height: 100vh;
    display: grid;
    place-content: center;
    padding: 1rem;
  }
  
  

  Marked as helpful

  1

  ---

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @grace-snow Thank you so so much🧡 You are the first who reviewed my code. Thank you again. Your suggestion is really valuable to me.💚

  0