@ZeroOne00001
Submitted
@Kellenkjames
@ZeroOne00001
Submitted
@Kellenkjames
Posted
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