fix: responsiveness (#206)

uclaacm · Oct 29, 2024 · fda8a97 · fda8a97
1 parent 0512e66
commit fda8a97
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/pages/projects.tsx b/pages/projects.tsx
@@ -53,7 +53,7 @@ function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
           {filteredProjects.length > 0 ? (
             filteredProjects.map((project, i) => {
               return (
-                <div className="col-4" key={project.name}>
+                <div className="project-grid-item" key={project.name}>
                   <ProjectCard
                     searchQuery={searchQuery}
                     project={project}

diff --git a/styles/globals.css b/styles/globals.css
@@ -177,6 +177,22 @@ body {
   transition: none;
 }
 
+.project-grid-item {
+  grid-column: span 4;
+}
+
+@media (max-width: 800px) {
+  .project-grid-item {
+    grid-column: span 6;
+  }
+}
+
+@media (max-width: 600px) {
+  .project-grid-item {
+    grid-column: span 12;
+  }
+}
+
 @media (max-width: 1160px) {
   #navbar #nav-container #hamburger {
     display: flex;