diff --git a/leptos_components/src/elements/cards.rs b/leptos_components/src/elements/cards.rs
index aa06106..40836de 100644
--- a/leptos_components/src/elements/cards.rs
+++ b/leptos_components/src/elements/cards.rs
@@ -30,13 +30,13 @@ pub fn ProfessionalExperienceCard(
         }
     }
     view!{
-        <div id={id} class="border border-4 m-auto mt-4 rounded w-9/12 bg-[#0C120C] flex flex-row justify-around p-4">
-            <div class="flex flex-col justify-center space-y-2 w-1/4">
+        <div id={id} class="border border-4 m-auto mt-4 rounded w-9/12 bg-[#0C120C] med:flex med:flex-row justify-around p-4">
+            <div class="flex flex-col justify-center space-y-2 md:w-1/4">
                 <img src={img_path} class="w-full" />
                 <H2>{heading}</H2>
                 <H3>{subtitle}</H3>
             </div>
-            <div class="space-y-2 w-2/4">
+            <div class="space-y-2 md:w-2/4">
                 {
                     experience_blurbs.into_iter().map(|item| view!{
                         <P prop:innerHTML={item}>""</P>
diff --git a/website/src/app.rs b/website/src/app.rs
index 597891c..dc64231 100644
--- a/website/src/app.rs
+++ b/website/src/app.rs
@@ -58,7 +58,7 @@ pub fn App() -> impl IntoView {
 fn HomePage() -> impl IntoView {
     view! {
         <canvas id="p-e-canvas"></canvas>
-        <div class="flex flex-row min-h-screen justify-center items-center">
+        <div class="med:flex med:flex-row min-h-screen med:justify-center med:items-center">
             <img class="max-w-lg rounded" src="/founder_portrait.jpg" />
             <div class="flex flex-col m-4 p-2 items-start max-w-lg">
                 <ul class="flex flex-row justify-around w-full">