Fix/improve-responsiveness-projectCards #132
Conversation
merging fix/improve-responsiveness-projectCards to dev, to push the code from dev branch directly.
|
|
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
There was a problem hiding this comment.
❌ Changes requested. Reviewed everything up to ef6a694 in 10 minutes and 18 seconds
More details
- Looked at
22lines of code in1files - Skipped
0files when reviewing. - Skipped posting
0drafted comments based on config settings.
Workflow ID: wflow_XnkGh8PaCYxw4T9s
Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.
| @@ -45,7 +45,7 @@ export default function Projects({ isWorkspaceEnabled }: ProjectsProps) { | |||
| {[...Array(5).keys()].map((_, index) => ( | |||
| <div key={index} className="flex flex-col"> | |||
| <Skeleton className="h-8 w-1/3 mb-4" /> | |||
| <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> | |||
| <div className="grid gap-4 grid-cols-1 max-[768px]:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 min-[1441px]:grid-cols-3"> | |||
There was a problem hiding this comment.
The custom media queries max-[768px] and min-[1441px] are not standard Tailwind CSS syntax. Consider using Tailwind's built-in responsive utilities like sm:, md:, lg:, xl:, and 2xl: for better maintainability and consistency.
| <div className="grid gap-4 grid-cols-1 max-[768px]:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 min-[1441px]:grid-cols-3"> | |
| <div className="grid gap-4 grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3"> |
There was a problem hiding this comment.
Good point, but this was intentional. We will migrate this to flex-wrap eventually
This PR solves the issue #108
Previously cards looked like this:
Afterwards: https://drive.google.com/file/d/1wcUXduDfv_EDpQ7kJ_IjP30uK2gbI2pQ/view?usp=sharing
Important
Improve responsiveness of project cards in
projects.tsxby adjusting grid layout for different screen sizes.projects.tsxfor project cards.grid-colsconfiguration tomax-[768px]:grid-cols-1,md:grid-cols-1,lg:grid-cols-2,min-[1441px]:grid-cols-3for better responsiveness.This description was created by
for ef6a694. It will automatically update as commits are pushed.