Displaying Portfolio Projects in a Mobile-Friendly Interface

Question

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.stack.imgur.com/SkYYc.png)

Trying to get advice.

Answer 1

At line project-grid

Add this code too

@media (max-width: 600px) {
            
            .project-grid {
                grid-template-columns: 1fr;
            }
        }

Answer 2

Why don't you do it with flex-boxes In my opinion, flex-boxes are more useful Also, you can shorten the card height but can make them represent in full size when the user clicks on it (addEventListener() function)

Answer 3

@media (max-width: 600px) {
        
        .project-grid {
            grid-template-columns: 1fr;
        }
    }