Clear every third column of the second factors

After every third second factor selection block, the next column is treated with a `clear:left`, effectively starting the next row on the left.
OpenConext · Jul 6, 2017 · f342229 · f342229
1 parent 7a97e37
commit f342229
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/Surfnet/StepupSelfService/SelfServiceBundle/Resources/public/less/style.less b/src/Surfnet/StepupSelfService/SelfServiceBundle/Resources/public/less/style.less
@@ -19,13 +19,22 @@
     }
 }
 
-.second-factor-selector {
-    text-align: center;
+.second-factors {
 
-    img {
-        margin-top: 1em;
-        max-width: 200px;
-        max-height: 90px;
+    @media (min-width: 992px) {
+        > div:nth-child(3n+4) {
+            clear: left;
+        }
+    }
+
+    .second-factor-selector {
+        text-align: center;
+
+        img {
+            margin-top: 1em;
+            max-width: 200px;
+            max-height: 90px;
+        }
     }
 }
 

diff --git a/...Service/SelfServiceBundle/Resources/views/Registration/displaySecondFactorTypes.html.twig b/...Service/SelfServiceBundle/Resources/views/Registration/displaySecondFactorTypes.html.twig
@@ -11,7 +11,7 @@
 {% block content %}
     <h2>{{ block('page_title') }}</h2>
 
-    <div class="row">
+    <div class="row second-factors">
         {% if availableSecondFactors.sms is defined %}
             {% include 'SurfnetStepupSelfServiceSelfServiceBundle::Registration/partial/secondFactor.html.twig' with {
                 'type': 'sms',