SCSS , Component Reuseability

Community feedback

• 

  P

  Kellen James•120

  @KellenkjamesPosted 26 days ago

  Hi @ZeroOne00001,

  You've done a excellent job of matching the design and using SASS to organize your code. To make your component even more adaptable to different screen sizes and zoom levels, consider using responsive units like rem or em instead of static pixel values.

  For instance, converting the width of the .imageCard1 class from 320px to 20rem will ensure it scales appropriately on various devices:

  /* Before: */
  .imageCard1 {
    width: 320px;
  }
  
  /* After: */
  .imageCard1 {
    width: 20rem; /* Assuming a base font size of 16px */
  }
  

  I encourage you to explore using responsive units throughout your entire codebase. This will elevate your component's user experience and make it more accessible to a wider range of users.

  A key advantage of using responsive units is that they adapt to different screen sizes and zoom levels, ensuring your component looks great on any device. Pixel values, on the other hand, can become distorted or too small on larger screens or when users zoom in.

  Keep up the great work! If you have any questions or need further assistance, feel free to ask.

  Marked as helpful

  0