Partial commit

src/app/custom-selector/custom-selector.component.html

@@ -1,4 +1,4 @@
-<div class="selector" [ngStyle]="{'width.px' : 200 }">
+<div class="selector">
 	<div class="container" (click)="showDropdown = !showDropdown">
 		<div class="selected-value">
 			{{ header }}: <span *ngIf="selectedOption"> {{ selectedOption.name }} </span>

src/app/orders/orders.component.html

@@ -1,10 +1,10 @@
 <div class="widget-heading-holder">
 	<header> Order List </header>
-	<app-custom-selector header="Status" [options]="statusOptions" width="200"
-	[defaultOptionId]="statusOptions[0].id"></app-custom-selector>
+	<div class="selector-container">
+		<app-custom-selector header="Status" [options]="statusOptions" width="200" [defaultOptionId]="statusOptions[0].id"></app-custom-selector>
 
-	<app-custom-selector header="Date" [options]="dateOptions" width="200"
-	[defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+		<app-custom-selector header="Date" [options]="dateOptions" width="200" [defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+	</div>
 
 	<div class="search-input">
 		<input type="text" placeholder="Quick Search">
@@ -29,8 +29,14 @@
 			<div> 8PC Hot &amp; Crispy </div>
 			<div> KFC 4 + 4 </div>
 		</td>
-		<td> <div> 1 </div> <div> 4 </div> </td>
-		<td> <div> &#x20B9; 750 </div> <div> &#x20B9; 250 </div> </td>
+		<td>
+			<div> 1 </div>
+			<div> 4 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 750 </div>
+			<div> &#x20B9; 250 </div>
+		</td>
 		<td> Paid Online </td>
 		<td>
 			<div class="action-buttons">
@@ -46,8 +52,12 @@
 		<td>
 			<div> KFC 4 + 4 </div>
 		</td>
-		<td> <div> 1 </div> </td>
-		<td> <div> &#x20B9; 750 </div> </td>
+		<td>
+			<div> 1 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 750 </div>
+		</td>
 		<td> Paid Online </td>
 		<td>
 			<div class="status success"> Completed </div>
@@ -60,8 +70,12 @@
 		<td>
 			<div> KFC 4 + 4 </div>
 		</td>
-		<td> <div> 1 </div> </td>
-		<td> <div> &#x20B9; 750 </div> </td>
+		<td>
+			<div> 1 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 750 </div>
+		</td>
 		<td> Paid Online </td>
 		<td>
 			<div class="status failed"> Cancelled </div>
@@ -74,8 +88,12 @@
 		<td>
 			<div> KFC Bucket </div>
 		</td>
-		<td> <div> 1 </div> </td>
-		<td> <div> &#x20B9; 250 </div> </td>
+		<td>
+			<div> 1 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 250 </div>
+		</td>
 		<td> COD </td>
 		<td>
 			<div class="action-buttons">

src/app/orders/orders.component.scss

@@ -3,8 +3,25 @@
 		margin-right: 10%;
 	}
 
-	app-custom-selector {
-		margin: 0 10px;
+	.selector-container {
+		display: flex;
+
+		app-custom-selector {
+			margin: 0 10px;
+			flex-grow: 1;
+
+			@media screen and (max-width: 1023px) {
+				margin: 0;
+				width: 45%;
+				flex-grow: 0;
+			}
+		}
+
+		@media screen and (max-width: 1023px) {
+			justify-content: space-between;
+			width: 100%;
+			margin-bottom: 20px;
+		}
 	}
 }