Fix project layout to display properly on mobile

aleannab · Oct 22, 2023 · b9a65d6 · b9a65d6
1 parent 6f9422a
commit b9a65d6
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/ProjectTemplate.jsx b/src/components/ProjectTemplate.jsx
@@ -22,21 +22,23 @@ const ProjectTemplate = () => {
   return (
     <div className="relative w-full flex flex-col items-center justify-center overflow-hidden">
       <div className="absolute pattern w-full h-full z-[-30]" />
-      <Navigation isMain={false} />
-      <div className="flex flex-col w-full max-w-5xl space-y-10 items-center justify-center py-24 px-10">
-        <div className="flex flex-col lg:flex-row items-center justify-between items-start gap-10">
+      <div className="w-full flex flex-row-reverse max-w-6xl ">
+        <Navigation isMain={false} />
+      </div>
+      <div className="flex flex-col w-full max-w-5xl space-y-10 items-center justify-center py-24 px-10 bg-accent">
+        <div className="flex flex-col w-full lg:flex-row items-center justify-between items-start gap-10 bg-primary">
           <img
             src={projectData.hero}
             srcSet={`${projectData.hero2x} 2x, ${projectData.hero} 1x`}
-            className="max-w-xs border-2 border-info rounded-lg shadow-2xl"
+            className="w-full max-w-xs border-2 border-info rounded-lg shadow-2xl"
             alt={`${projectData.name} hero image`}
           />
-          <div className="flex flex-col">
+          <div className="flex flex-col w-full ">
             <h1 className="text-4xl font-serif font-bold text-center lg:text-left text-primary">{projectData.name}</h1>
             <p className="py-6 text-lg text-left whitespace-pre-line">{projectData.description}</p>
           </div>
         </div>
-        <div className="flex w-full flex-col md:flex-row justify-between">
+        <div className="flex w-full flex-col md:flex-row justify-between gap-5 bg-secondary">
           {projectData.details.map((detail) => (
             <ProjectInfo key={detail.id} data={detail} />
           ))}