From 95f163eec5ae0b7738896903b64195fdab91bf4b Mon Sep 17 00:00:00 2001
From: BrigitteLPB <guillemaud.theo@gmail.com>
Date: Fri, 20 Jan 2023 15:04:43 +0100
Subject: [PATCH] adding mobile support for filters

---
 css/filter.css | 29 ++++++++++++++++++++++++++++-
 index.html     |  2 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/css/filter.css b/css/filter.css
index 46770e4..c65beef 100644
--- a/css/filter.css
+++ b/css/filter.css
@@ -29,4 +29,31 @@
 
 .booki-filters .filter-button .filter-icon {
 	margin-right: 1em;
-}
\ No newline at end of file
+}
+
+@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
index 377986a..7d4a0a4 100644
--- 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>