diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index cbcc0571e..f05258341 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -46,5 +46,12 @@ export default {
   display: flex;
   align-items: flex-end;
   height: 100%;
+
+  @media (max-width: 546px) {
+    width: 100%;
+    height: 50%;
+    justify-content: flex-end;
+    margin-bottom: $space-x-small;
+  }
 }
 </style>
diff --git a/webapp/components/ProgressBar/ProgressBar.vue b/webapp/components/ProgressBar/ProgressBar.vue
index 93030c47b..6041bd359 100644
--- a/webapp/components/ProgressBar/ProgressBar.vue
+++ b/webapp/components/ProgressBar/ProgressBar.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="progress-bar">
-    <h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
     <div class="progress-bar__goal"></div>
     <div class="progress-bar__progress" :style="progressBarWidth"></div>
+    <h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
     <span v-if="label" class="progress-bar__label">{{ label }}</span>
   </div>
 </template>
@@ -39,6 +39,15 @@ export default {
   height: 100%;
   width: 240px;
   margin-right: $space-x-small;
+
+  @media (max-width: 680px) {
+    width: 180px;
+  }
+
+  @media (max-width: 546px) {
+    flex-basis: 50%;
+    flex-grow: 1;
+  }
 }
 
 .progress-bar__title {
@@ -46,6 +55,10 @@ export default {
   top: -2px;
   left: $space-xx-small;
   margin: 0;
+
+  @media (max-width: 546px) {
+    top: $space-xx-small;
+  }
 }
 
 .progress-bar__goal {
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 7105d8c74..d1ff9a2ad 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -265,11 +265,20 @@ export default {
 .sorting-dropdown {
   width: 250px;
   position: relative;
+
+  @media (max-width: 680px) {
+    width: 180px;
+  }
 }
 
 .top-info-bar {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+
+  @media (max-width: 546px) {
+    grid-row-end: span 3 !important;
+    flex-direction: column;
+  }
 }
 </style>