Html Question posted in
Some basic documentation can be found here.

Html – Displaying Portfolio Projects in a Mobile-Friendly Interface

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://phpout.com/wp-content/uploads/2023/12/SkYYc.png)

Trying to get advice.

Tags:

2

Answers


  1. 0

    At line project-grid

    Add this code too

    @media (max-width: 600px) {
            
            .project-grid {
                grid-template-columns: 1fr;
            }
        }
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search