diff --git a/src/register/registrationFields/UsernameField.jsx b/src/register/registrationFields/UsernameField.jsx
index b2271e46..f30d55c8 100644
--- a/src/register/registrationFields/UsernameField.jsx
+++ b/src/register/registrationFields/UsernameField.jsx
@@ -42,7 +42,7 @@ const UsernameField = (props) => {
     iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && props.value === ' ') {
-    className = 'username-suggestions';
+    className = 'username-suggestions d-flex align-items-center';
     iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && errorMessage) {
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 6b064659..f11af0e0 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -67,7 +67,7 @@
 
 .username-suggestions {
   position: relative;
-  margin-top: -8.7%;
+  margin-top: -2.5rem;
   margin-left: 15px;
 }
 
@@ -84,8 +84,26 @@
 }
 
 .username-scroll-suggested--form-field {
-  width: 21rem;
+  width: 20rem;
   white-space: nowrap;
   overflow-x: auto;
   display: inline-flex;
 }
+
+@media (max-width: 372px) {
+  .username-scroll-suggested--form-field {
+    width: 11rem !important;
+  }
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, "sm")) {
+  .username-scroll-suggested--form-field {
+    width: 15rem;
+  }
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}