diff --git a/components/PageHeading.tsx b/components/PageHeading.tsx
index b44b84a..8f37b67 100644
--- a/components/PageHeading.tsx
+++ b/components/PageHeading.tsx
@@ -28,20 +28,20 @@ export default function PageHeading({ project, children }: Props) {
 
   return (
     <div className="divide-y divide-gray-200">
-      <div className="items-start space-y-2 pb-8 pt-6 md:space-y-5 xl:grid xl:grid-cols-3 xl:gap-x-8">
+      <div className="items-start pb-8 pt-6 md:space-y-5 md:grid md:grid-cols-3 md:gap-x-10">
         {project.coverImage ? (
           <Image
             src={project.coverImage}
             alt="avatar"
             width={300}
             height={300}
-            className="h-60 w-60 mx-auto my-auto object-contain row-span-3 hidden xl:block"
+            className="w-full mx-auto my-auto object-contain row-span-3 hidden md:block"
           />
         ) : (
-          <PlaceholderImage className="w-60 h-60 mx-auto my-auto object-contain row-span-3 hidden xl:block" />
+          <PlaceholderImage className="w-60 h-60 mx-auto my-auto object-contain row-span-3 hidden md:block" />
         )}
 
-        <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 xl:col-span-2">
+        <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 md:col-span-2">
           {!!project.website && (
             <CustomLink
               className="text-inherit hover:text-inherit hover:underline"
@@ -87,7 +87,7 @@ export default function PageHeading({ project, children }: Props) {
         </div>
       </div>
 
-      <div className="pt-4 items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-4 xl:space-y-0">
+      <div className="pt-4 items-start space-y-4 md:grid md:grid-cols-3 md:space-x-4 md:space-y-0">
         {children}
       </div>
     </div>
diff --git a/pages/[fund]/projects/[slug].tsx b/pages/[fund]/projects/[slug].tsx
index 5cb7b62..60437be 100644
--- a/pages/[fund]/projects/[slug].tsx
+++ b/pages/[fund]/projects/[slug].tsx
@@ -67,17 +67,15 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
 
       <div className="divide-y divide-gray-200">
         <PageHeading project={project}>
-          <div className="w-full flex flex-col items-center gap-4 xl:flex">
-            {coverImage ? (
+          <div className="w-full flex flex-col items-center gap-4">
+            {coverImage && (
               <Image
                 src={coverImage}
                 alt="avatar"
                 width={700}
                 height={700}
-                className="w-full max-w-[700px] mx-auto object-contain xl:hidden"
+                className="w-full max-w-96 mx-auto object-contain md:hidden"
               />
-            ) : (
-              <PlaceholderImage className="w-full max-w-[700px] mx-auto object-contain xl:hidden" />
             )}
 
             <div className="w-full max-w-96 space-y-6 p-6 bg-white rounded-lg">
@@ -172,7 +170,7 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
           </div>
 
           <article
-            className="prose max-w-none mt-4 p-6 xl:col-span-2 bg-white rounded-lg"
+            className="prose max-w-none mt-4 p-6 col-span-2 bg-white rounded-lg"
             dangerouslySetInnerHTML={{ __html: xss(content || '') }}
           />
         </PageHeading>
@@ -249,13 +247,5 @@ export async function getServerSideProps({ params, resolvedUrl }: GetServerSideP
     })
   }
 
-  return {
-    props: {
-      project: {
-        ...project,
-        content,
-      },
-      donationStats,
-    },
-  }
+  return { props: { project: { ...project, content }, donationStats } }
 }