diff --git a/website/client/src/components/challenges/challengeItem.vue b/website/client/src/components/challenges/challengeItem.vue
index 5dd44f0656..b3a1fd61e0 100644
--- a/website/client/src/components/challenges/challengeItem.vue
+++ b/website/client/src/components/challenges/challengeItem.vue
@@ -294,8 +294,9 @@
       justify-content: space-evenly;
       background-color: $gray-700;
       text-align: center;
-      padding: 16px;
+      padding: 8px;
       border-radius: .25em;
+      flex-wrap: wrap;
 
       > div {
         .value {
@@ -326,6 +327,8 @@
       }
 
       > div.muted {
+        margin: 8px;
+
         .value {
           opacity: 0.5;
           font-size: 20px;
diff --git a/website/client/src/components/challenges/findChallenges.vue b/website/client/src/components/challenges/findChallenges.vue
index b75bd6f427..7c4342af78 100644
--- a/website/client/src/components/challenges/findChallenges.vue
+++ b/website/client/src/components/challenges/findChallenges.vue
@@ -68,6 +68,17 @@
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
+  @media only screen and (max-width: 768px) {
+    .header-row {
+      margin-bottom: 1rem;
+    }
+
+    .col-10.standard-page {
+      // full width on smaller devices
+      max-width: 100%;
+    }
+  }
+
   .header-row {
     h1 {
       color: $purple-200;
diff --git a/website/client/src/components/challenges/myChallenges.vue b/website/client/src/components/challenges/myChallenges.vue
index be85ea90e5..986d491574 100644
--- a/website/client/src/components/challenges/myChallenges.vue
+++ b/website/client/src/components/challenges/myChallenges.vue
@@ -88,6 +88,17 @@
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
+  @media only screen and (max-width: 768px) {
+    .header-row {
+      margin-bottom: 1rem;
+    }
+
+    .col-10.standard-page {
+      // full width on smaller devices
+      max-width: 100%;
+    }
+  }
+
   .header-row {
     h1 {
       color: $purple-200;