Merge branch 'development' into testing

src/app/components/article-search/article-search.component.scss

@@ -12,6 +12,15 @@
     border-radius: 4px;
 }
 
+
+
+@media screen and (max-width: 485px) {
+    .article-search-container {
+        width: 95%;
+    }
+}
+
+
 .article-section {
     box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
     -moz-box-shadow:  0px -2px 6px 0px $hima-content-shadow-color;
@@ -76,7 +85,7 @@
 .search-icon {
     position: absolute;
     top: 13px;
-    right: 100px;
+    right: 16%;
     z-index: 2;
     width: 20px;
 }
@@ -84,11 +93,50 @@
 .clear-icon {
     position: absolute;
     top: 13px;
-    right: 130px;
+    right: 19%;
     z-index: 2;
     width: 20px;
 }
 
+@media screen and (max-width: 964px) {
+    .search-icon {
+        right: 14%;
+    }
+    
+    .clear-icon {
+        right: 18%;
+    }
+}
+
+@media screen and (max-width: 663px) {
+    .search-icon {
+        right: 12%;
+    }
+    
+    .clear-icon {
+        right: 17%;
+    }
+}
+
+@media screen and (max-width: 495px) {
+    .search-icon {
+        right: 10%;
+    }
+}
+
+@media screen and (max-width: 389px) {
+    .search-icon {
+        right: 8%;
+    }
+}
+
+@media screen and (max-width: 331px) {
+    .search-icon {
+        right: 6%;
+    }
+}
+
+
 .search-box::placeholder {
     color: black;
 }