Narrow viewports

Hello,

Can anyone help me please.

Why the header of my narrow viewports is not visible?

<!DOCTYPE html>
<html>	
	<head>
		<link rel="stylesheet" type="text/css" media="(min-width:574px)" href="reservia.css">
		<link rel="stylesheet" type="text/css" media="only screen and (max-width: 574px)" href="narrow-viewports.css">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.google.com/specimen/Raleway?sidebar.open=true&selection.family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="fontawesome-free-5.15.1-web/css/all.css">
		<title>Réservia</title>
		<meta charset="utf-8">
	</head>
	<body class="body">
		<header class="grande-resolution">
			<p class="menu">
				<img src="Reservia.svg">
			</p>
			<nav class="menu">
				<a class="menu-hébergement" href="">Hébergements</a>
				<a class="menu-activités" href="">Activités</a>
				<a class="menu-inscription" href="">S'inscrire</a>
			</nav>
		</header>
		<header class="petite-resolution">
			<div classe="line1">
				<p class="menu">
					<img src="Reservia.svg">
				</p>
				<nav>
					<a class="menu-hébergement" href="">Hébergements</a>
				</nav>
				<nav class="line2">
					<a class="menu-activités" href="">Activités</a>
					<a class="menu-inscription" href="">S'inscrire</a>
				</nav>
			</div>
		</header>
		<main>
			<h1 class="big-title">Trouvez votre hébergement pour des vacances de rêve</h1>
			<p class="comp-text">En plein centre ville ou en pleine nature</p>
			<nav class="input-group">
				<span class="map-marker">
					<i class="fas fa-map-marker-alt"></i>
				</span> <!--span est un conteneur générique en ligne (inline)-->
				<input type="text" value="Marseille,France">
				<button>Rechercher</button>
			</nav>
			<form method="post" action="traitement.php" class="flex-group">
				<h1 class="filtres">Filtres</h1>
				<section class="group-filtres">
					<nav class="economique">
						<div class="money">
							<i class="fas fa-money-bill-wave"></i>
						</div>
						<button class="eco-button">Économique</button>
					</nav>
					<nav class="familial" >
						<div class="children">
							<i class="fas fa-child"></i>
						</div>
						<button class="fam-button">Familial</button>
					</nav>
					<nav class="romantique">
						<div class="heart">
							<i class="fas fa-heart"></i>
						</div>
						<button class="rom-button">Romantique</button>
					</nav>
					<nav class="animaux-autorises">
						<div class="dog">
							<i class="fas fa-dog"></i>
						</div>
						<button class="anim-button">Animaux autorisés</button>
					</nav>
				</section>
			</form>
			<div class="complementary-info">
				<i class="fas fa-info"></i>
				<p class="text-complementary-info">Plus de 500 logements sont disponibles dans cette ville</p>
			</div>
			<div class="first-2sectors"><!--Pour la mise en page de deux premier secteurs côte-->
				<section><!--Pour le premier secteur-->
					<h1 class="Title-Marseille">Hébergements à Marseille</h1>
					<div class="flex-articles1"><!--Pour le flexbox des articles de premier secteur -->
						<article class="section1-art-unit1">
							<img id="trying"class="photos-Marseille" src="marcus-loke-WQJvWU_HZFo-unsplash.jpg">
							<div class="white-fond">
								<h2>Auberge la Cannebière</h2>
								<p class="info-phrases">Nuit à partir de 25€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit1">
							<img class="photos-Marseille" src="	fred-kleber-gTbaxaVLvsg-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel du port</h2>
								<p class="info-phrases">Nuit à partir de 52€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit1">
							<img class="photos-Marseille" src="	reisetopia-B8WIgxA_PFU-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel Les mouettes</h2>
								<p class="info-phrases">Nuit à partir de 76€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>	
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="annie-spratt-Eg1qcIitAuA-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel de la mer</h2>
								<p class="info-phrases">Nuit à partir de 46€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray"class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>	
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
							<div class="white-fond">
								<h2>Auberge Le Panier</h2>
								<p class="info-phrases">Nuit à partir de 23€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel chez Amina</h2>
								<p class="info-phrases" >Nuit à partir de 96€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
					</div>
					<nav class="plus-Marseille">Affichez plus</nav>
				</section>
				<section class="all-group-popular">
					<div class="popular-first-phrase">
						<h1>Les plus populaires</h1>
						<i class="fas fa-chart-line"></i>
					</div>
					<div class="all-articles2">
						<article class="article2-1">
							<img class="photos-popular" src="emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
							<div class="white-background2">
								<h2 class="max-width-popular"> Hôtel Le Solei du matin</h2>
								<p class="popular-P">Nuit à partir de 128€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="articles2">
							<img class="photos-popular" src="aw-creative-VGs8z60yT2c-unsplash.jpg">
							<div class="white-background2">
			    				<h2 class="max-width-popular"> Au coeur de l'eau Chabres d'hôtes </h2>
			    				<p class="popular-P">Nuit à partir de 71€</p>
			    				<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
			    			</div>
			   			</article>
			    		<article class="articles2">
			    			<img class="photos-popular" src="febrian-zakaria-sjvU0THccQA-unsplash.jpg">
			    			<div class="white-background2" >
			    				<h2 class="max-width-popular"> Hôtel Tout bleu et Blanc </h2>
			    				<p class="popular-P">Nuit à partir de 68€</p>
			    				<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
					</div>
				</section>
			</div>
			<section class="sec3">
				<h1 id="h1-act-Marseille">Activités à Marseille</h1>
				<div class="All-articles3">
					<article>
						<img class="photos-act-Marseille" src="reno-laithienne-QUgJhdY5Fyk-unsplash.jpg">
						<div class="white-background3">
							<h2>Vieux Port</h2>
						</div>
					</article>
					<div class="column2-art3">
						<article>
							<img class="photos-act-Marseille" src="paul-hermann-QFTrLdQIRhI-unsplash copie.jpg">
							<div class="white-background3">
								<h2>Port de Pomègues</h2>
							</div>
						</article>
						<article class="marg-top3">
							<img class="photos-act-Marseille" src="kevin-hikari-rV_Qd1l-VXg-unsplash.jpg">
							<div class="white-background3">
								<h2>Iles du Frioul</h2>
							</div>
						</article>
					</div>
					<article>
						<img class="photos-act-Marseille" src="kilyan-sockalingum-NR8-cBCN3aI-unsplash copie.jpg">
						<div class="white-background3">
							<h2>Parc National des Calanques</h2>
						</div>
					</article>
					<div class="2column-art3">
						<article>
							<img class="photos-act-Marseille" src="florian-wehde-xW9e8gdotxI-unsplash.jpg">
							<div class="white-background3">
								<h2>Notre-Dame-de-la-Garde</h2>
							</div>
						</article>
						<article class="marg-top4">
							<img class="photos-act-Marseille" src="lena-paulin-wH2-EJoDcV0-unsplash.jpg">
							<div class="white-background3">
								<h2>Parc Longchamp</h2>
							</div>
						</article>
					</div>
				</div>
			</section>
		</main>
		<footer>
			<section class="sec-4">
				<div class="col1-sec4">
					<h1 class="f-size">A propos</h1>
					<nav class="cols">
						<a href="">Fonctionnement du site</a>
						<a class="marg-phrases" href="">Conditions générales de vente</a>
						<a class="marg-phrases" href="">Données et confidentialité</a>
					</nav>
				</div>
				<div class="col2-sec4">
					<h1 class="f-size">Nos hébergements</h1>
					<nav class="cols">
						<a href="">Charte qualité</a>
						<a class="marg-phrases" href="">Soumettre votre hôtel</a>
					</nav>
				</div>
				<div class="col3-sec4">
					<nav class="cols">
						<h1 class="f-size">Assistance</h1>
						<a href="">Centre d'aide</a>
						<a class="marg-phrases" href="">Nous contacter</a>
					</nav>
				</div>
			</section>
	    </footer>
	</body>
</html>





body{
	font-family:'Raleway', sans-serif;
	margin-top: 0px;
}
.petite-resolution{
	display: none;
}
.menu{
	font-size: 15px;
	display: flex;
	box-sizing: border-box;
	padding-right: 8px;
}
.menu-hébergement{
	display: flex;
	text-decoration: none;
	color: #0065FC;
	margin-right: 67px;
	align-items: center;
	border-top: 2px solid #0065FC;
	box-sizing:border-box;
	height:100% ; 
	padding-left: 16px;
 	padding-right: 16px;
}
.menu-activités{
	color: black;
	text-decoration: none;
	margin-right: 69px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.menu-inscription{
	color: #0065FC;	
	text-decoration: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
header{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	max-width: 1400px;
	box-sizing: border-box;
	padding-left: 50px;
	margin: 0 auto;
}
h1{
	font-size: 22px;
	box-sizing: border-box;
}
.big-title{
	display: flex;
	padding-top: 3px;
}
.comp-text{
	display: flex;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.input-group{
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	margin-top: -2px;
}
.input-group span{
	display: flex;
	background-color: #F2F2F2;
	align-items: center;
	border-radius: 17px 0px 0px 17px;
	font-size: 18px;
	padding-right:	19px;
	padding-left: 19px;
	box-sizing: border-box;
}
.input-group input{ 
  	border: 1px solid #f2f2f2;
  	border-left: 0;
  	border-right: 0;
 	font-weight: bold;
  	font-size: 18px;
  	margin: 0px;
 	box-sizing: border-box;
 	padding-left: 15px;
}
.input-group input: focus{
 	outline: none;
 	box-sizing: border-box;
}
.input-group button{
	border: none;
	background-color: #0065FC;
	border-radius: 0px 17px 17px 0px;
	color: #fff;
	font-weight:bold;
	padding: 15px 17px 15px 17px;
	font-size:18px; 
	margin:	0px;
	box-sizing:	border-box;
}
.flex-group{
	display:	flex;
	justify-content:	flex-start;
	align-items:	baseline; 
	box-sizing: border-box;
}
.group-filtres{
    display: flex;
    margin-top: 28px;
    border: none;
    box-sizing:	border-box;
    flex-wrap: wrap;
}
.filtres{
	display: flex;
	font-size: 18px;
	font-weight: bold;
	box-sizing: border-box;
	margin-top: -2px;
}
.money{
	display: flex;
	margin-left: 33px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 17px 15px 17px 15px;
	font-size: 16px;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}
.eco-button{
	display: flex;
	padding: 13px 30px 13px 65px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 36px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.economique{
	display: flex;
	align-items: center;
	margin-right: 18px;
	box-sizing: border-box;
}
.children{
	display: flex;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 15px 18px 15px 18px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	margin-left: 15px;
	box-sizing: border-box;
}
.fam-button{
	display: flex;
	padding: 13px 23px 13px 56px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 17px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.familial{
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.heart{
	display: flex;
	margin-right: 7px;
	margin-left: 10px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 16px 15px 14px 15px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}	
.rom-button{
	display: flex;
	padding: 13px 18px 13px 59px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 11px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;	
}
.romantique{ 
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.dog{
	display: flex;
	margin-right: 20px;
	margin-left: 4px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 15px 14px 15px 14px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}
.anim-button{
	display: flex;
	padding: 13px 20px 13px 60px;
	font-weight: bold;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 4px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.animaux-autorises{
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.complementary-info{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	box-sizing: border-box;
	margin-top: 20px;
}
.fa-info{
	display: flex;
	color: #0065FC;
	border-radius: 50px 50px 50px 50px;
	padding: 5px 8px 4px 8px;
	background: transparent;
	border: 2px solid #F2F2F2;
	box-sizing: border-box;
	font-size: 12px;
}
.text-complementary-info{
	display: flex;
	margin-left: 10px;
	box-sizing: border-box;
}
main{
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 30px;
	max-width: 1400px;
	margin: 0 auto;	
}
.Title-Marseille{
	display:flex;
	background-color: #F2F2F2;
	max-width: 884px;
	margin-top: 24px;
	border-radius: 20px 20px 0px 0px;
	padding-top: 42px;
	padding-left: 38px;
}
.flex-articles1{
	display: flex;
	max-width: 874px;
	flex-wrap: wrap;
	background-color: #F2F2F2; 
	margin-top: -19px;
	padding-left:10px;
}
.section1-art-unit1{
	margin-top: 24px;
	margin-left: 32px;
}
.section1-art-unit2{
	margin-top: 30px;
	margin-left: 32px;
}
.photos-Marseille{
	border-radius: 15px 15px 0px 0px;
	border: 5px solid white;
}
.white-fond{
	background-color: white;
	margin-top: -24px;
	border-radius: 0px 0px 15px 15px;
	padding-left: 15px;
}
.info-phrases{
	font-size: 14px;
	margin-bottom: 5px;
	margin-top: -8px;
}
h2{
	display: flex;
	font-size: 16px;
	padding-top: 11px;
}
.fa-star{
	display: flex;
	font-size: 11.5px;
	color: #0065FC;
	margin-right: -4px;
	padding-bottom: 10px;
}
#gray{
	color: gray !important;
}
.plus-Marseille{
	display: flex;
	font-size: 17px;
	font-weight: bold;
	background-color: #F2F2F2;  
	max-width: 848px;
	padding-top: 41px;
	padding-left: 36px;
	padding-bottom:47px;
	border-radius: 0px 0px 20px 20px;
}
.first-2sectors{
	display: flex;
}
.all-group-popular{
	display: flex;
	flex-direction: column;
	margin-left: 40px;
}
.article{
	display: flex;
	flex-direction: row;
	max-width: 300px; 
}
.popular-first-phrase{
display: flex;
align-items: baseline;
justify-content: space-between;
background-color: #F2F2F2; 
max-width: 420px;
border-radius: 20px 20px 0px 0px;
padding-left: 38px;
padding-bottom: 8px;
margin-top: 24px;
padding-top: 23px;
}
.fa-chart-line{
	display: flex;
	font-size: 22px;
	padding-right: 40px;
}
.group-popular{
	display: flex;
	flex-direction: column;
}
.article2-1{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 32px;
}
.articles2{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 32px;
}
.all-articles2{
	background-color: #F2F2F2;
	max-width: 420px;
	padding-left: 36px;
	border-radius: 0px 0px 20px 20px;
	padding-right: 40px;
}
.photos-popular{
	border: 5px solid white;
	border-radius: 20px 0px 0px 20px;
}
.white-background2{
	display: flex;
	flex-direction: column; 
	align-items: stretch;
	background-color: white;
	border-radius: 0px 20px 20px 0px;
	padding-left: 17px;
	padding-right: 38px;
}
.max-width-popular{
	display: flex;
	max-width: 150px;
	align-content: stretch;
}
.popular-P{
	font-size: 14px;
}
#h1-act-Marseille{
	margin-top: 61px;
}
.photos-act-Marseille{
	border-radius: 15px 15px 0px 0px;
}
.white-background3{
	background-color: white;
	border-radius: 0px 0px 15px 15px;
	max-width: 289px;
	padding-bottom:4px;
	padding-left: 19px;
	padding-top:10px;
	margin-top: -17PX;
}
.All-articles3{
	display: flex;
	max-width: 1342px;
	justify-content: space-between;
	margin-top: 24px;
}
.marg-top3{
	margin-top: 45px;
}
.marg-top4{
	margin-top: 41px;
}
a{
	text-decoration: none;
	color: black;
}
.sec-4{
	padding-top: 31px;
	display: flex;
	justify-content: space-between;
	max-width: 1021px;
}
p{
	font-size: 16px;
}
.f-size{
	font-size:18px;
}
.cols{
	display: flex;
	flex-direction: column;
	font-size: 16px;
	padding-bottom: 84px;
	padding-top: 5px;
}
.col2-sec4{
	margin-right: 57px;
}
.marg-phrases{
	margin-top: 13.5px;
}
article{
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
}
footer{
	padding-left: 50px;
	padding-right: 50px;
	background-color: #F2F2F2; 
	max-width: 1400px;
	margin: 58px auto 0; 
	box-sizing: border-box;
}
@media only screen and (max-width: 574px){
	body{
		font-family:'Raleway', sans-serif;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}
	.grande-resolution{
		display: none;
	}
	.line1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 70px;
		padding-left: 70px;
	}
	.line2{
		padding-top: 10px;
	}
	.menu-inscription{
		margin-left: 50px;
		align-items: center;
		color: #0065FC;
		text-decoration: none;
		font-weight: bold;
		padding-top: 10px;
		box-sizing: border-box;
	}
	.menu-hébergement{
		padding-left: 90px;
		padding-right: 90px;
		padding-bottom: 15px;
		text-decoration: none;
		color: #0065FC;
		border-bottom: 2px solid #0065FC;
		margin-left: 0px;
	}
	.menu-activités{
		text-decoration: none;
		padding-left: 112px;
		padding-right: 112px;
		color: #0065FC;
		border-bottom: 2px solid #f2f2f2;
		padding-bottom: 15px;
		margin-left: 0px;
	}
}

Thank you in advance. :two_hearts:

:thinking:

??? :crazy_face: :thinking: @jenovs

You have a media query for narrow viewports where you set the header to not visible.

yes, but I hide only my css for large viewports…
I don’t understand… :sweat_smile:

Look in reservia.css I have

.petite-resolution{
	display: none;
}

to hide the css for narrow-viewports and it works , why it doesn’t work for the large viewports ?

I have 2 headers , one for the narrow and the second for large viewports
. The first one I hide in the css of the second one, and the second one in the css of the first one …

No you don’t. From the code you posted I see that petite-resolution is hidden, but it’s never unhidden.

Then help me to understand please, why it works here?
I think I’m getting crazy :disappointed_relieved:

<!DOCTYPE html>
<html>	
	<head>
		<link rel="stylesheet" type="text/css" media="all and (min-width:600px)" href="grande-resolution.css">
		<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px)" href="petite-resolution.css">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.google.com/specimen/Raleway?sidebar.open=true&selection.family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="fontawesome-free-5.15.1-web/css/all.css">
		<title>Réservia</title>
		<meta charset="utf-8">
	</head>
	<body class="body">

		<header class="grande-resolution">


			<p class="menu">
				<img src="Reservia.svg">
			</p>
			<nav class="menu">
				<a class="menu-hébergement" href="">Hébergements</a>
				<a class="menu-activités" href="">Activités</a>
				<a class="menu-inscription" href="">S'inscrire</a>
			</nav>
		
		</header>

		<header class="petite-resolution">

			<div class="line1">
				<p class="logo">
					<img src="Reservia.svg">
				</p>
				<nav>
					<a class="menu-inscription" href="">S'inscrire</a>
				</nav>

			</div>
			
				<nav class="line2">
					<a class="menu-hébergement" href="">Hébergements</a>
					<a class="menu-activités" href="">Activités</a>
				</nav>
</header>
	</body>
</html>
body{
	font-family:'Raleway', sans-serif;
	margin-top: 0px;
}
.petite-resolution{
	display: none;
}

.menu{
	font-size: 15px;
	display: flex;
	box-sizing: border-box;
	padding-right: 8px;
}
.menu-hébergement{
	display: flex;
	text-decoration: none;
	color: #0065FC;
	margin-right: 67px;
	align-items: center;
	border-top: 2px solid #0065FC;
	box-sizing:border-box;
	height:100% ; 
	padding-left: 16px;
 	padding-right: 16px;
}
.menu-activités{
	color: black;
	text-decoration: none;
	margin-right: 69px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.menu-inscription{
	color: #0065FC;	
	text-decoration: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
header{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	max-width: 1400px;
	box-sizing: border-box;
	padding-left: 50px;
	margin: 0 auto;
}
@media only screen and (max-width: 574px){


body{
	font-family:'Raleway', sans-serif;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.grande-resolution{
	display: none;
}
.line1{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 70px;
	padding-left: 70px;
}
.menu-inscription{
	margin-left: 50px;
	align-items: center;
	color: #0065FC;
	text-decoration: none;
	font-weight: bold;
	padding-top: 10px;
	box-sizing: border-box;
}
.line2{
	padding-top: 10px;
}

.menu-hébergement{
	padding-left: 90px;
	padding-right: 90px;
	padding-bottom: 15px;
	text-decoration: none;
	color: #0065FC;
	border-bottom: 2px solid #0065FC;
	margin-left: 0px;
}
.menu-activités{
	text-decoration: none;
	padding-left: 112px;
	padding-right: 112px;
	color: #0065FC;
	border-bottom: 2px solid #f2f2f2;
	padding-bottom: 15px;
	margin-left: 0px;
}
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.