Merge pull request #423 from valor-software/development

fix: search on blog page for responsive
valor-software · Feb 6, 2024 · fe559f1 · fe559f1
2 parents 6fe5bdd + b9a5b9d
commit fe559f1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html
@@ -1,5 +1,5 @@
 <section class="landing-section !pt-24 !pb-0">
-	<div class="container flex flex-col items-end">
+	<div class="container flex flex-col lg:items-end">
 		<mat-form-field *ngIf="articles.length > 0"
 		                class="search">
 			<input type="text"
@@ -30,7 +30,7 @@
 		</mat-form-field>
 
 
-		<div class="flex flex-col lg:flex-row mt-7"
+		<div class="flex flex-col lg:flex-row lg:mt-7"
 		     *ngIf="firstArticles.length > 0 && activeArticle">
 
 			<a *ngIf="activeArticle?.title"

diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.scss b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.scss
@@ -39,6 +39,14 @@ $bp-large: 1024px;
 
 .search {
   width: 32%;
+
+  @media (max-width: $bp-large) {
+    width: 50%;
+  }
+
+  @media (max-width: $bp-medium) {
+    width: 100%;
+  }
 }
 
 ::ng-deep .cdk-overlay-pane {