I'm currently working on my portfolio website and seeking advice on optimizing the display of my personal projects. At present, I've implemented a card-like interface to showcase my projects, which looks great on desktop. However, on mobile devices, only one card is visible, and I'm exploring solutions to enhance the mobile viewing experience.
I've contemplated using a carousel/slider specifically for mobile devices. Nevertheless, I'm concerned that this approach might limit visibility, as users would need to horizontally slide through the cards. This might cause some projects to go unnoticed.
Do you have any suggestions on how to effectively present multiple project cards on a mobile interface without compromising visibility or user experience?
Thank you for your help!
https://maxbenen.github.io/MaxBenen/
[DesktopMobile](https://i.sstatic.net/SkYYc.png)
Trying to get advice.
At line project-grid
Add this code too
@media (max-width: 600px) {
.project-grid {
grid-template-columns: 1fr;
}
}