adding mobile support for filters

BrigitteLPB · Jan 20, 2023 · 95f163e · 95f163e
1 parent c7a6c53
commit 95f163e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/css/filter.css b/css/filter.css
@@ -29,4 +29,31 @@
 
 .booki-filters .filter-button .filter-icon {
 	margin-right: 1em;
-}
+}
+
+@media (min-width: 768px) {	/* Ordinateur & tablette */
+
+}
+
+@media (max-width: 991px) and (min-width: 768px) {	/* Tablette */
+
+}
+
+@media (max-width: 767px) {	/* Mobile */
+	.booki-filters-container {
+		flex-wrap: wrap;
+		width: 100%;
+		padding: 0;
+	}
+
+	.booki-filters-container .filter-title {
+		width: 100%;
+		margin: 0;
+	}
+
+	.booki-filters-container .filter-button {
+		width: 48%;
+		justify-content: center;
+		margin-top: 1em;
+	}
+}
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
 	<!-- FILTERS -->
 	<div class="booki-filters">
 		<div class="booki-filters-container">
-			<p class="text-normal-bold">Filtres</p>
+			<p class="text-normal-bold filter-title">Filtres</p>
 			<button type="submit" class="filter-button"><i class="fa-solid fa-money-bill-wave icon-meduim filter-icon"></i><p class="text-normal-bold filter-text">Économique</p></button>
 			<button type="submit" class="filter-button"><i class="fa-solid fa-person icon-meduim filter-icon"></i><p class="text-normal-bold filter-text">Familiale</p></button>
 			<button type="submit" class="filter-button"><i class="fa-solid fa-heart icon-meduim filter-icon"></i><p class="text-normal-bold filter-text">Romantique</p></button>