diff --git a/static/css/core-ui.css b/static/css/core-ui.css
index bf92cd6ae..8bca84034 100644
--- a/static/css/core-ui.css
+++ b/static/css/core-ui.css
@@ -1265,3 +1265,16 @@ a:focus {
   top: 5px;
   font-size: 18px;
 }
+
+.co-alert-popin-warning {
+  margin-left: 10px;
+}
+
+@media screen and (max-width: 767px) {
+  .co-alert-popin-warning {
+    display: block;
+    margin: 0px;
+    margin-top: 10px;
+    float: none;
+  }
+}
diff --git a/static/partials/new-repo.html b/static/partials/new-repo.html
index 03a034e84..6b379c628 100644
--- a/static/partials/new-repo.html
+++ b/static/partials/new-repo.html
@@ -41,7 +41,7 @@
                     <input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name"
                            required autofocus data-trigger="manual" data-content="{{ createError }}" data-placement="right" ng-pattern="/^[.a-z0-9_-]+$/">
                   </span>
-                  <span class="co-alert co-alert-warning" ng-show="!newRepoForm.repoName.$error.required && !newRepoForm.repoName.$valid" style="margin-left: 10px;">
+                  <span class="co-alert co-alert-warning co-alert-popin-warning" ng-show="!newRepoForm.repoName.$error.required && !newRepoForm.repoName.$valid">
                     Repository names must match [a-z0-9_-]+
                   </span>
                 </div>