add responsiveness

armada-ths · Sep 9, 2024 · 95a23f7 · 95a23f7
1 parent fce1a6b
commit 95a23f7
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/app/_components/OrganisationMembersGraphic.tsx b/src/app/_components/OrganisationMembersGraphic.tsx
@@ -230,14 +230,14 @@ export function OrganisationMembersGraphic() {
   })
 
   return (
-    <figure className="relative mt-5">
+    <figure className="relative mt-5 w-9/12 object-scale-down">
       <svg viewBox="0 0 170 170" xmlns="http://www.w3.org/2000/svg">
         <circle fill="orange" cx="85" cy="85" r={memberRadius} />
         {pgCircles}
         {otCircles}
         {hostCircles}
       </svg>
-      <figcaption className="absolute bottom-0 opacity-90">
+      <figcaption className="bottom-0 opacity-90 md:absolute">
         <OrganisationMembersInfo title="Infographics guide">
           The graphics below contain our current organisation structure.
           <ul>

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -54,7 +54,9 @@ export default async function RecruitmentPage() {
           , the student union at KTH, any profit Armada makes goes back to the
           students, funding THS initiatives for a better student life.
         </P>
-        <OrganisationMembersGraphic />
+        <div className="flex w-full justify-center">
+          <OrganisationMembersGraphic />
+        </div>
       </Page.Boundary>
     </Page.Background>
   )