Desktop optimize feedback form

schoolapps/static/common/style.css

@@ -339,14 +339,21 @@ FEEDBACK
 ++++++++++++++++*/
 
 .rating {
-  display: flex;
-  flex-direction: row-reverse;
-  flex-wrap: wrap;
-  width: 100%;
-  min-width: 150px;
-  max-width: 600px;
-  min-height: 40px;
-  margin-top: 12px;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    width: 100%;
+    min-width: 150px;
+    max-width: 600px;
+    justify-content: flex-end;
+}
+
+@media only screen and (max-width: 992px) {
+    .rating{
+        margin-top: 12px;
+        min-height: 40px;
+        justify-content: space-around;
+    }
 }
 
 .rating label {

schoolapps/support/templates/support/feedback.html

@@ -13,44 +13,48 @@
 
         <ul class="collection">
             <li class="collection-item">
-                <div><div>{{ form.design_rating.label }} <span class="red-text">*</span></div>
-                    <div class="rating">
+                <div class="row"><div class="col s12 l6">{{ form.design_rating.label }} <span class="red-text">*</span></div>
+                    <div class="rating col s12 l6">
                         {% for radio in form.design_rating %}
                             {{ radio.tag }}
                             <label for="{{ radio.id_for_label }}"></label>
                         {% endfor %}
                     </div>
                 </div>
+            <div class="hide-on-large-only">&nbsp;</div>
             </li>
             <li class="collection-item">
-                <div><div>{{ form.performance_rating.label }} <span class="red-text">*</span></div>
-                    <div class="rating">
+                <div class="row"><div class="col s12 l6">{{ form.performance_rating.label }} <span class="red-text">*</span></div>
+                    <div class="rating col s12 l6">
                         {% for radio in form.performance_rating %}
                             {{ radio.tag }}
                             <label for="{{ radio.id_for_label }}"></label>
                         {% endfor %}
                     </div>
                 </div>
+            <div class="hide-on-large-only">&nbsp;</div>
             </li>
             <li class="collection-item">
-                <div><div>{{ form.usability_rating.label }} <span class="red-text">*</span></div>
-                    <div class="rating">
+                <div class="row"><div class="col s12 l6">{{ form.usability_rating.label }} <span class="red-text">*</span></div>
+                    <div class="rating col s12 l6">
                         {% for radio in form.usability_rating %}
                             {{ radio.tag }}
                             <label for="{{ radio.id_for_label }}"></label>
                         {% endfor %}
                     </div>
                 </div>
+            <div class="hide-on-large-only">&nbsp;</div>
             </li>
             <li class="collection-item">
-                <div><div>{{ form.overall_rating.label }} <span class="red-text">*</span></div>
-                    <div class="rating">
+                <div class="row"><div class="col s12 l6">{{ form.overall_rating.label }} <span class="red-text">*</span></div>
+                    <div class="rating col s12 l6">
                         {% for radio in form.overall_rating %}
                             {{ radio.tag }}
                             <label for="{{ radio.id_for_label }}"></label>
                         {% endfor %}
                     </div>
                 </div>
+            <div class="hide-on-large-only">&nbsp;</div>
             </li>
 
             <li class="collection-item">