fix: padding and make images responsive

PhantomKnight287 · Sep 14, 2023 · 761f29c · 761f29c
1 parent b35ad5e
commit 761f29c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -5,3 +5,7 @@
 body {
   @apply bg-[#111010] text-white;
 }
+
+.image__container img {
+  position: unset !important;
+}
diff --git a/app/project/[name]/page.tsx b/app/project/[name]/page.tsx
@@ -49,15 +49,16 @@ async function ProjectPage(props: Props) {
     (p) => encodeURIComponent(p.slug) === encodeURIComponent(props.params.name)
   )!;
   return (
-    <div className="min-h-screen lg:pt-20 pt-10 container items-center justify-center flex-col lg:max-w-xl">
+    <div className="min-h-screen lg:pt-20 lg:p-0 p-5 container items-center justify-center flex-col lg:max-w-xl overflow-hidden">
       <BackButton />
-      <Image
-        className="max-w-[850px] max-h-[450px] mx-auto rounded-md mt-5"
-        src={project.image?.url}
-        alt={project.image?.alt}
-        width={project.image?.width}
-        height={project.image?.height}
-      />
+      <div className="w-full image__container">
+        <Image
+          className="mx-auto rounded-md mt-5 object-cover w-full h-[unset]"
+          src={project.image?.url}
+          alt={project.image?.alt}
+          fill
+        />
+      </div>
       {project.image.source ? (
         <p className="text-center text-gray-400">
           Source: {project.image.source}