As a user, I want the project card component to display horizontally on mobile so it uses space more efficiently and improves the browsing experience.
🧠 Context
Currently, on mobile devices, each project card component stacks its contents vertically—image on top, text below. This layout causes each card to take up significant vertical space, making it harder to browse multiple projects at once.
To improve usability and compactness, we should update the project card layout to display horizontally on small screens (e.g., using a flex row layout). This way, the image and text can sit side-by-side, reducing vertical scrolling.
🛠️ Implementation Plan
Utilize a media query and flexbox's flex-direction: {column vs row} to change the way the card is styled
✅ Acceptance Criteria
As a user, I want the project card component to display horizontally on mobile so it uses space more efficiently and improves the browsing experience.
🧠 Context
Currently, on mobile devices, each project card component stacks its contents vertically—image on top, text below. This layout causes each card to take up significant vertical space, making it harder to browse multiple projects at once.
To improve usability and compactness, we should update the project card layout to display horizontally on small screens (e.g., using a flex row layout). This way, the image and text can sit side-by-side, reducing vertical scrolling.
🛠️ Implementation Plan
Utilize a media query and flexbox's flex-direction: {column vs row} to change the way the card is styled
✅ Acceptance Criteria