Mobile styling of RoleCard

OpenConext · Oct 1, 2023 · 6e67382 · 6e67382
1 parent 11e50d2
commit 6e67382
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/client/src/components/RoleCard.scss b/client/src/components/RoleCard.scss
@@ -56,6 +56,11 @@
 
         .sds--checkbox-container {
             margin-right: 25px;
+
+            @media (max-width: $medium) {
+                margin: 0 0 20px 0;
+            }
+
         }
 
         img.provider, svg.provider {
@@ -66,7 +71,7 @@
             border: 1px solid var(--sds--color--gray--300);
             padding: 16px;
 
-            @media (max-width: 680px) {
+            @media (max-width: $medium) {
                 margin: 0 auto 20px 0;
             }
         }
@@ -79,7 +84,7 @@
                 margin-left: 15px;
             }
 
-            @media (max-width: 680px) {
+            @media (max-width: $medium) {
                 margin: 20px auto 0 0;
             }
 

diff --git a/client/src/styles/mixins.scss b/client/src/styles/mixins.scss
@@ -36,6 +36,13 @@
     .input-field, .select-field, .date-field, .sds--checkbox-container{
         margin-top: 20px;
     }
+
+    .sds--checkbox-container {
+        @media (max-width: $medium) {
+            margin-top: 0;
+        }
+
+    }
     .actions {
         grid-column-start: first;
         margin-top: 30px;