diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
index d74b52b9..95421361 100644
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
@@ -2,15 +2,18 @@
 
 .contact-form-dialog {
 
+    @include media-breakpoint('xs') {
+        width: 100%;
+    }
+
+    @include media-breakpoint-up('xs') {
+        width: 400px;
+    }
+
     .mat-dialog-container {
         padding: 0;
-        width: 400px;
         overflow: hidden;
 
-        @include media-breakpoint('xs') {
-            width: auto;
-        }
-
         .mat-toolbar {
             min-height: initial;
         }
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
index 3aae2b7d..f058844e 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -131,8 +131,8 @@
 
     <div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
-        <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
-             fxLayout.xs="column" fxLayoutAlign="center center">
+        <div fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center"
+             fxLayout="column" fxLayoutAlign="center center">
 
             <!-- BREADCRUMB -->
             <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
index 9f1c36b9..d060cd1e 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@@ -2,9 +2,16 @@
 
 .scrumboard-card-dialog {
 
+    @include media-breakpoint('xs') {
+        width: 100%;
+    }
+
+    @include media-breakpoint-up('xs') {
+        width: 720px;
+    }
+
     .mat-dialog-container {
         padding: 0;
-        width: 720px;
 
         .mat-toolbar {
 
@@ -162,9 +169,16 @@
                                 background-size: contain;
                                 background-position: 50% 50%;
                                 background-repeat: no-repeat;
-                                margin-right: 24px;
                                 font-weight: 500;
                                 color: rgba(0, 0, 0, 0.6);
+
+                                @include media-breakpoint('xs') {
+                                    margin-bottom: 24px;
+                                }
+
+                                @include media-breakpoint-up('xs') {
+                                    margin-right: 24px;
+                                }
                             }
 
                             .attachment-content {