diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index c7ee345c2085ed0b1aa1a122c5738c72a9321c81..24e3bc6616d4b83beaba9cd5ae85e3fcd41d1bba 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -3804,12 +3804,12 @@ headline block
         }
         &.bigicon_top {
             .icon-layer {
-                display: flex;
-                align-items: center;
                 background-repeat: no-repeat;
-                background-position: center calc(50% - 8em);
+                background-position: center;
+                margin-top: 8em;
+                margin-bottom: 1em;
                 background-size: 196px;
-                min-height: 600px;
+                height: 196px;
 
                 @each $icon in $icons {
                     &.icon-black-#{$icon} {
@@ -3832,19 +3832,21 @@ headline block
                     }
                 };
 
-                &.half {
-                    min-height: 300px;
+               &.half {
+                    height: 144px;
                     background-size: 144px;
-                    background-position: center calc(50% - 4em);
+                    background-position: center;
+                    margin-top: 2em;
+                    margin-bottom: 0;
                 }
             }
 
-
             .cw-block-headline-textbox {
-                width: 100%;
+                width: 80%;
+                padding-bottom: 4em;
+                margin: 0 auto;
                 .cw-block-headline-title {
                     h1 {
-                        margin-top: 2em;
                         border: none;
                         font-size: 5em;
                         text-align: center;
@@ -3861,17 +3863,18 @@ headline block
                 }
             }
         }
+
         &.bigicon_before {
+            display: flex;
+            align-items: center;
+            min-height: 600px;
             .icon-layer {
-                display: flex;
-                align-items: center;
+                min-height: 196px;
+                min-width: 196px;
+                margin:0 28px 0 28px;
                 background-repeat: no-repeat;
-                background-position: 4em center;
-                min-height: 600px;
+                background-position: left center;
 
-                &.half {
-                    min-height: 300px;
-                }
                 @each $icon in $icons {
                     &.icon-black-#{$icon} {
                         @include background-icon($icon, info, 196);
@@ -3895,14 +3898,12 @@ headline block
             }
 
             .cw-block-headline-textbox {
-                width: 100%;
+                margin: 2em 1em 2em 0;
                 .cw-block-headline-title {
-
                     h1 {
                         border: none;
                         font-size: 5em;
                         text-align: left;
-                        margin-left: 4.25em;
                     }
                 }
 
@@ -3910,10 +3911,13 @@ headline block
                     display: none;
                 }
             }
+
+            &.half {
+                min-height: 300px;
+            }
         }
 
         &.ribbon {
-            .icon-layer {
                 display: flex;
                 align-items: center;
                 min-height: 600px;
@@ -3925,6 +3929,7 @@ headline block
                 .cw-block-headline-textbox {
                     width: 100%;
                     padding: 1em 0;
+                    margin: 3em 0;
                     background-color: fade-out($black, 0.5);
                     .cw-block-headline-title {
 
@@ -3944,7 +3949,6 @@ headline block
                         }
                     }
                 }
-            }
         }
     }
 }
@@ -3967,12 +3971,10 @@ headline block
             }
             &.bigicon_top {
                 .icon-layer {
-                    background-position: center calc(50% - 4em);
-                    min-height: 300px;
-
-                    &.half {
-                        min-height: 150px;
-                    }
+                    background-position: center;
+                    height: 98px;
+                    margin-top: 2em;
+                    margin-bottom: 1em;
 
                     @each $icon in $icons {
                         &.icon-black-#{$icon} {
@@ -3997,15 +3999,18 @@ headline block
 
                     &.half {
                         background-size: 72px;
-                        background-position: center calc(50% - 2em);
+                        height: 72px;
+                        background-position: center;
                     }
                 }
 
 
                 .cw-block-headline-textbox {
+                    max-width: 80%;
+                    margin: 0 auto;
+                    padding-bottom: 1em;
                     .cw-block-headline-title {
                         h1 {
-                            margin-top: 2.5em;
                             font-size: 2em;
                         }
                     }
@@ -4018,13 +4023,11 @@ headline block
                 }
             }
             &.bigicon_before {
+                min-height: 300px;
                 .icon-layer {
-                    min-height: 300px;
-
-                    &.half {
-                        min-height: 150px;
-                    }
-                    background-position: 2em center;
+                    min-height: 92px;
+                    min-width: 92px;
+                    background-position: 0 center;
                     @each $icon in $icons {
                         &.icon-black-#{$icon} {
                             @include background-icon($icon, info, 92);
@@ -4053,29 +4056,31 @@ headline block
                             font-size: 2.5em;
                         }
                     }
+                }
 
+                &.half {
+                    min-height: 150px;
                 }
             }
 
             &.ribbon {
-                .icon-layer {
-                    min-height: 300px;
+                min-height: 300px;
 
-                    &.half {
-                        min-height: 150px;
-                    }
+                &.half {
+                    min-height: 150px;
+                }
 
-                    .cw-block-headline-textbox {
-                        .cw-block-headline-title {
-                                h1 {
-                                font-size: 2.5em;
-                            }
-                        }
+                .cw-block-headline-textbox {
+                    margin: 3em 0;
 
-                        .cw-block-headline-subtitle {
-                            h2 {
-                                font-size: 12px;
-                            }
+                    .cw-block-headline-title {
+                        h1 {
+                            font-size: 2.5em;
+                        }
+                    }
+                    .cw-block-headline-subtitle {
+                        h2 {
+                            font-size: 12px;
                         }
                     }
                 }
@@ -4084,6 +4089,22 @@ headline block
     }
 }
 
+.responsive-display {
+    .cw-block-headline {
+        .cw-block-headline-content {
+            background-size: 100%;
+            &.bigicon_before {
+                .icon-layer {
+                    background-size: 144px;
+                }
+                .cw-block-headline-textbox .cw-block-headline-title h1 {
+                    font-size: 4em;
+                }
+            }
+        }
+    }
+}
+
 /*
 headline block end
 */
diff --git a/resources/vue/components/courseware/CoursewareHeadlineBlock.vue b/resources/vue/components/courseware/CoursewareHeadlineBlock.vue
index 12aaa8b456ef99761f01b2df8ffe92449413f9ba..32b2903d4ae5efc5260d1e80318fcef7b2d8879d 100755
--- a/resources/vue/components/courseware/CoursewareHeadlineBlock.vue
+++ b/resources/vue/components/courseware/CoursewareHeadlineBlock.vue
@@ -18,13 +18,13 @@
                         class="icon-layer"
                         :class="['icon-' + currentIconColor + '-' + currentIcon, currentHeight === 'half' ? 'half' : 'full']"
                     >
-                        <div class="cw-block-headline-textbox">
-                            <div class="cw-block-headline-title">
-                                <h1 :style="textStyle">{{ currentTitle }}</h1>
-                            </div>
-                            <div class="cw-block-headline-subtitle">
-                                <h2 :style="textStyle">{{ currentSubtitle }}</h2>
-                            </div>
+                    </div>
+                    <div class="cw-block-headline-textbox">
+                        <div class="cw-block-headline-title">
+                            <h1 :style="textStyle">{{ currentTitle }}</h1>
+                        </div>
+                        <div class="cw-block-headline-subtitle">
+                            <h2 :style="textStyle">{{ currentSubtitle }}</h2>
                         </div>
                     </div>
                 </div>