Cross browser compatibility

Hello,

Finely I finished my first website HTML/CSS code and I have a question concerning cross browser compatibility.

When I open my html with Google Chrome browser it’s very small (see picture), and also I have some difference about the layout of the page.
How I have to solve this kind of problem?

Thank you in advance.

My code:


<html>	
	<head>
		<link rel="stylesheet" type="text/css" media="(min-width:1366px)" href="reservia.css">
		<link rel="stylesheet" media="(max-width:1365px)" type="text/css" href="mobile-res.css">
		<link media="(min-width:768px) and (max-width:1365px)" rel="stylesheet" type="text/css" href="ipad-res.css">
		<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="big-res-header">
			<img class="logo" src="reservia.png">
			<nav class="nav-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>
		<!--class "petite-resolution" is for mobile(from 320px to 414px)-->
		<header class="mobile-res-header">
				<div class="logo-and-inscription sides-small-res">
					<p class="logo">
						<img src="reservia.png">
					</p>
					<nav>
						<a class="menu-inscription" href="">S'inscrire</a>
					</nav>
				</div>
			<nav class="hebergement-and-activites">
				<a class="menu-hébergement" href="">Hébergements</a>
				<a class="menu-activités" href="">Activités</a>
			</nav>
		</header>
		<header class="ipad-header">
			<img class="logo-ipad" src="reservia.png">
			<nav class="nav-menu-ipad">
				<a class="hébergement-header" href="">Hébergements</a>
				<a class="activités-header" href="">Activités</a>
				<a class="inscription-header" href="">S'inscrire</a>
			</nav>
		</header>
		<main>
			<div class="sides-small-res">
				<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"><!--span est un conteneur-text-mars générique en ligne (inline)-->
						<i class="fas fa-map-marker-alt"></i><!--Localisation icon-->
					</span> 
					<input type="text" value="Marseille,France">
					<button>Rechercher</button>
					<span class="search"><!--class "search" is for small resolution-->
						<i class="fas fa-search" media="(max-width: 600px)"></i><!--search icon-->
					</span>
				</nav>
				<form class="group-filtres" method="post" action="traitement.php">
					<h1 class="filtres">Filtres</h1>
					<div class="small-form"><!--class "small-form is for small resolution-->
						<nav class="eco-small">
							<span class="money-small">
								<i class="fas fa-money-bill-wave"></i><!--money icon-->
							</span>
							<button class="eco-button-small">Économique</button>
						</nav>
						<nav class="fam-small">
							<span class="chil-small">
								<i class="fas fa-child"></i><!--children icon -->
							</span>
							<button class="fam-button-small">Familial</button><!--man hands up icon-->
						</nav>
					</div><!--class "small-form for economique and familial ends here-->
					<nav class="group-eco">
						<span class="money">
							<i class="fas fa-money-bill-wave"></i><!--icon money-->
						</span>
						<button class="eco-button">Économique</button>
					</nav>
					<nav class="group-familial" >
						<span class="children">
							<i class="fas fa-child"></i><!--children icon-->
						</span>
						<button class="fam-button">Familial</button><!--icon man hands up-->
					</nav>
					<nav class="group-romantic">
						<span class="heart">
							<i class="fas fa-heart"></i><!--icon heart-->
						</span>
						<button class="rom-button">Romantique</button>
					</nav>
					<nav class="group-animaux">
						<span class="dog">
							<i class="fas fa-dog"></i><!--icon dog-->
						</span>
						<button class="anim-button">Animaux autorisés</button>
					</nav>
				</form>
				<div class="group-info"><!--class "padding-sides" is for small resolution-->
					<span>
						<i class="fas fa-info"></i><!--icon "I" for information-->
					</span>
					<p class="text-info">Plus de 500 logements sont disponibles dans cette ville</p>
				</div>
			</div>
			<div class="group-mars-and-pop" ><!--Layout of first two sectors -->
				<section class="group-marseille sides-small-res"><!--First sector-->
					<h1 class="titre-marseille">Hébergements à Marseille</h1>
					<div class="all-art-mars"><!--flexbox of articles(first sector) -->
						<article class="line1-art-mars">
							<img class="photos-Marseille" src="marcus-loke-WQJvWU_HZFo-unsplash.jpg">
							<img class="photos-small-mars" src="large-1.jpg">
							<div class="conteneur-text-mars">
								<h2 class="h2-heb-mars">Auberge la Cannebière</h2>
								<p class="price-heb-mars">Nuit à partir de 25€</p>
								<div class="star-group-mars">
									<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="line1-art-mars marg-left-ipad">
							<img class="photos-Marseille" src="	fred-kleber-gTbaxaVLvsg-unsplash.jpg">
							<img class="photos-small-mars" src="large-2.jpg"><!--photos of small resolution-->
							<div class="conteneur-text-mars">
								<h2 class="h2-heb-mars">Hôtel du port</h2>
								<p class="price-heb-mars">Nuit à partir de 52€</p>
								<div class="star-group-mars">
									<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="line1-art-mars marg-top-ipad">
							<img class="photos-Marseille" src="reisetopia-B8WIgxA_PFU-unsplash.jpg">
							<img class="photos-small-mars" src="large-3.jpg">
							<div class="conteneur-text-mars">
								<h2 class="h2-heb-mars">Hôtel Les mouettes</h2>
								<p class="price-heb-mars">Nuit à partir de 76€</p>
								<div class="star-group-mars">
									<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="line2-art-mars marg-left-ipad marg-top-ipad">
							<img class="photos-Marseille" src="annie-spratt-Eg1qcIitAuA-unsplash.jpg">
							<img class="photos-small-mars" src="large-4.jpg">
							<div class="conteneur-text-mars">
								<h2 class="h2-heb-mars">Hôtel de la mer</h2>
								<p class="price-heb-mars">Nuit à partir de 46€</p>
								<div class="star-group-mars">
									<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="line2-art-mars marg-top-ipad" >
							<img class="photos-Marseille" src="nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
							<img class="photos-small-mars" src="large-5.jpg">
							<div class="conteneur-text-mars">
								<h2 class="h2-heb-mars">Auberge Le Panier</h2>
								<p class="price-heb-mars">Nuit à partir de 23€</p>
								<div class="star-group-mars">
									<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="line2-art-mars marg-left-ipad marg-top-ipad">
							<img class="photos-Marseille" src="febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
							<img class="photos-small-mars" src="large-6.jpg">
							<div class="conteneur-text-mars">
								<h2 class="h2-heb-mars">Hôtel chez Amina</h2>
								<p class="price-heb-mars" >Nuit à partir de 96€</p>
								<div class="star-group-mars">
									<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="group-popular"><!--Sector POPULAR-->
					<div class="pop-title-and-icon sides-small-res">
						<h1 class="titre-pop">Les plus populaires</h1>
						<i class="fas fa-chart-line"></i>
					</div>
					<div class="all-art-pop sides-small-res">
						<article class="art-pop">
							<img class="photos-popular" src="emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
							<div class="conteneur-text-pop">
								<h2 class="h2-pop">Hôtel Le Soleil du matin</h2>
								<p class="pop-price">Nuit à partir de 128€</p>
								<div class="star-group-pop">
									<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="art-pop">
							<img class="photos-popular" src="aw-creative-VGs8z60yT2c-unsplash.jpg">
							<div class="conteneur-text-pop">
			    				<h2 class="h2-pop"> Au coeur de l'eau Chambres d'hôtes </h2>
			    				<p class="pop-price">Nuit à partir de 71€</p>
			    				<div class="star-group-pop">
									<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="art-pop">
			    			<img class="photos-popular" src="febrian-zakaria-sjvU0THccQA-unsplash.jpg">
			    			<div class="conteneur-text-pop" >
			    				<h2 class="h2-pop"> Hôtel Tout bleu et Blanc </h2>
			    				<p class="pop-price">Nuit à partir de 68€</p>
			    				<div class="star-group-pop">
									<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="group-act-mars sides-small-res"><!--Sector ACTIVITES MARSEILLE-->
				<h1 class="titre-act-marseille">Activités à Marseille</h1>
				<div class="all-art-act-mars">
					<article class="art-act-m">
						<img class="photos-act-Marseille" src="reno-laithienne-QUgJhdY5Fyk-unsplash.jpg">
						<img class="small-res-photo-act-mars" src="large-11.jpg">
						<div class="conteneur-text-act-mars">
							<h2 class="h2-act-mars">Vieux Port</h2>
						</div>
					</article>
					<div class="layout-horizontal-act-mars">
						<article class="art-act-m">
							<img class="photos-act-Marseille" src="paul-hermann-QFTrLdQIRhI-unsplash copie.jpg">
							<img class="small-res-photo-act-mars" src="large-12.jpg">
							<div class="conteneur-text-act-mars">
								<h2 class="h2-act-mars">Port de Pomègues</h2>
							</div>
						</article>
						<article class="art-act-m">
							<img class="photos-act-Marseille" src="kevin-hikari-rV_Qd1l-VXg-unsplash.jpg">
							<img class="small-res-photo-act-mars" src="large-13.jpg">
							<div class="conteneur-text-act-mars">
								<h2 class="h2-act-mars">Iles du Frioul</h2>
							</div>
						</article>
					</div>
						<article class="art-act-m">
							<img class="photos-act-Marseille" src="kilyan-sockalingum-NR8-cBCN3aI-unsplash copie.jpg">
							<img class="small-res-photo-act-mars" src="large-14.jpg">
							<div class="conteneur-text-act-mars">
								<h2 class="h2-act-mars">Parc National des Calanques</h2>
							</div>
						</article>
						<div class="layout-horizontal-act-mars marg-top-art-mars">
							<article class="art-act-m">
								<img class="photos-act-Marseille" src="florian-wehde-xW9e8gdotxI-unsplash.jpg">
								<img class="small-res-photo-act-mars" src="large-15.jpg">
								<div class="conteneur-text-act-mars">
									<h2 class="h2-act-mars">Notre-Dame-de-la-Garde</h2>
								</div>
							</article>
							<article class="art-act-m marg-top4 marg-top-art-mars">
								<img class="photos-act-Marseille" src="lena-paulin-wH2-EJoDcV0-unsplash.jpg">
								<img class="small-res-photo-act-mars" src="large-16.jpg">
								<div class="conteneur-text-act-mars">
									<h2 class="h2-act-mars">Parc Longchamp</h2>
								</div>
							</article>
						</div>
					</div>
				</div>
			</section>
		</main>
		<footer><!--for gray background-->
			<section class="group-footer sides-small-res">
				<div>
					<h1 class="h1-footer">A propos</h1>
					<nav class="cols-footer">
						<a class="footer-a" href="">Fonctionnement du site</a>
						<a class="footer-a" href="">Conditions générales de vente</a>
						<a class="footer-a" href="">Données et confidentialité</a>
					</nav>
				</div>
				<div class="margin-left-text-footer">
					<h1 class="h1-footer">Nos hébergements</h1>
					<nav class="cols-footer">
						<a class="footer-a"  href="">Charte qualité</a>
						<a class="footer-a"  href="">Soumettre votre hôtel</a>
					</nav>
				</div>
				<div class="margin-left-text-footer">
					<h1 class="h1-footer">Assistance</h1>
					<nav class="cols-footer">
						<a class="footer-a" href="">Centre d'aide</a>
						<a class="footer-a" href="">Nous contacter</a>
					</nav>
				</div>
			</section>
	    </footer>
	</body>
</html>



	border-radius: 50px 50px 50px 50px;
	font-weight: bold;
	font-size: 17px;
	box-sizing: border-box;
}
.group-info{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	box-sizing: border-box;
}
.fa-info{
	display: flex;
	color: #0065FC;
	padding: 5px 8px 4px 8px;
	border: 2px solid #F2F2F2;
	border-radius: 50px 50px 50px 50px;
	font-size: 10px;
}
.text-info{
	display: flex;
	margin-left: 10px;
	box-sizing: border-box;
	margin-left: 11px;
	font-size: 15px;
	margin-top: 42px;
}
.group-mars-and-pop{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	margin-top: 24px;
	
}
.group-marseille{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 772px;

}
.titre-marseille{
	display:flex;
	background-color: #F2F2F2; 
	font-size: 20px;
	border-radius: 20px 20px 0px 0px;
	padding-left: 40px;
	margin: 0px;
	padding-top: 40px;
}
.all-art-mars{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #F2F2F2;
	padding-left: 35px;
	padding-right: 40px;
	padding-top: 28px;
}
.line1-art-mars{
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
	display: flex;
	flex-direction: column;
}
.photos-Marseille{
	border-radius: 15px 15px 0px 0px;
	border: 5px solid white;
}
.photos-small-mars{
	display: none;
}/*photos of small resolution*/
.conteneur-text-mars{
	background-color: white;
	border-radius: 0px 0px 15px 15px;
	padding-left: 15px;
}
.h2-heb-mars{
	display: flex;
	font-size: 14px;
	margin-top: 4px;
	margin-bottom: 4px;
}
.price-heb-mars{
	font-size: 13px;
	margin: 0px;
}
.star-group-mars{
	margin-top: 6px;
	padding-bottom: 8px;
}
.fa-star{
	color: #0065FC;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 9px;
	font-size: 10.5px;
}
#gray{
	color: gray !important;
}
.line2-art-mars{
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
	display: flex;
	flex-direction: column;
	margin-top: 28px;
}
.plus-Marseille{
	display: flex;
	font-size: 15px;
	font-weight: bold;
	background-color: #F2F2F2;
	padding-top: 34px;
	padding-left: 40px;
	padding-bottom:43px;
	border-radius: 0px 0px 20px 20px;
}
.group-popular{
	display: flex;
	flex-direction: column;
	max-width: 434px;
	box-sizing: border-box;
}
.pop-title-and-icon{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	background-color: #F2F2F2; 
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
	padding: 0px;
	padding-left: 40px;
	padding-right: 40px;
}
.titre-pop{
	font-size: 20px;
	margin: 0px;
	box-sizing: 0px;
	padding-top: 40px;
}
.fa-chart-line{/*icon group popular*/
	display: flex;
	font-size: 22px;
}
.all-art-pop{
	flex-direction: column;
	justify-content: space-between;
	background-color: #F2F2F2;
	border-radius: 0px 0px 20px 20px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 30px;
}
.art-pop{
	display: flex;
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
	margin-top: 28px;
}
.photos-popular{
	border: 5px solid white;
	border-radius: 20px 0px 0px 20px;
}
.conteneur-text-pop{
	background-color: white;
	border-radius: 0px 20px 20px 0px;
	padding-top: 16px;
	padding-left: 15px;
	padding-right: 14px;
	max-width: 150px;
}
.h2-pop{
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}
.pop-price{
	font-size: 14px;
	margin-top: 8px;
	padding: 0px;
}
.star-group-pop{
	margin-top: 34px;
	padding: 0px;
}
.group-act-mars{
	max-width: 1366px;
	margin-top: 54px;
	margin-bottom: 56px;
}
.titre-act-marseille{
	display:flex;
	font-size: 20px;
}
.all-art-act-mars{
	display: flex;
	max-width: 1366px;
	justify-content: space-between;
	margin-top: 20px;
}
.art-act-m{
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
}
.small-res-photo-act-mars{
	display: none;
}
.photos-act-Marseille{
	border-radius: 15px 15px 0px 0px;
}
.conteneur-text-act-mars{
	background-color: white;
	border-radius: 0px 0px 15px 15px;
	padding-bottom: 4px;
	padding-left: 15px;
	padding-top: 3px;
}
.h2-act-mars{
	font-size: 14px;
}
.layout-horizontal-act-mars{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
footer{
	background-color: #F2F2F2; 
	margin: 0 auto; 
	box-sizing: border-box;
	max-width: 1366px;
}/*for gray background*/
.group-footer{
	padding-top: 26px;
	display: flex;
	justify-content: flex-start;
	max-width: 1190px;
	padding-bottom: 46px;
	margin: auto;
	padding-left: 0px;
}
.h1-footer{
	font-size: 15px;
}
.cols-footer{
	display: flex;
	flex-direction: column;
	font-size: 15px;
}
.footer-a{
	margin-top: 9px;
	text-decoration: none;
	color: black;
}
p{
	font-size: 18px;
}
.margin-left-text-footer{
	margin-left: 230px;
}

css mobile:

/* size: IPHONE SE*/
body{
	font-family:'Raleway', sans-serif;
		margin: 0px;
	}
	.big-res-header{
		display: none;
	}
	.ipad-header{
		display: none;
	}
	.mobile-res-header{
	}
	.sides-small-res{
		max-width: 280px;
		margin: auto;
		box-sizing: border-box;
	}
	.logo-and-inscription{ /* Logo Reservia+ S'inscrire */ 
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
	}
	.hebergement-and-activites{
		display: flex;
		box-sizing: border-box;
		justify-content: flex-start;
	}
	.menu-inscription{ /* Logo Reservia+S'inscrire */ 
		color: #0065FC;
		text-decoration: none;
		font-weight: bold;
		font-size: 14px;
	}
	.menu-hébergement{
		padding-left: 40px;
		padding-right: 35px;
		padding-bottom: 15px;
		text-decoration: none;
		color: #0065FC;
		border-bottom: 2px solid #0065FC;
		font-size: 14px;
	}
	.menu-activités{
		text-decoration: none;
		padding-left: 45px;
		padding-right: 55px;
		color: #0065FC;
		border-bottom: 2px solid #f2f2f2;
		padding-bottom: 15px;
		font-size: 14px;
	}
	main{
		box-sizing: border-box;
		margin: auto;
		max-width: 320px;
	}
	.big-title{
		font-size: 18px;
		margin-top: 26px;
	}
	.comp-text{ 
		font-size: 14px;
		margin-top: 12px;
	}
	.input-group{/* research group */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		box-sizing: border-box;
		margin-top: 28px;
	}
	.map-marker{/* localisation icon*/
		display: flex;
		background-color: #F2F2F2;
		align-items: center;
		border-radius: 17px 0px 0px 17px;
		font-size: 15px;
		padding-right: 16px;
		padding-left: 16px;
		box-sizing: border-box;
		height: 44px;
	}
	.input-group input{ /* value:  Marseille, France*/
		box-sizing: border-box;
	  	border: 1px solid #f2f2f2;
	  	border-left: 0;
	  	border-right: 0;
	 	font-weight: bold;
	  	font-size: 15px;
	  	margin: 0px;
	 	padding-left: 15px;
	 	width: 196px;
	 	height: 44px;
	 	margin: 0px;
	 	margin-right: 0px;
	}
	.input-group button{
		display: none; /* "rechercher" of big resolution, for small sizes an icon is used*/
	}
	.fa-search{ /* search icon*/
		background-color: #0065FC;
		border-radius: 14px 14px 14px 14px;
		color: #fff;
		padding: 16px 16px 16px 16px;
		font-size:	15px; 
		height: 44px;
		margin: 0;
		margin-left: -10px;
		box-sizing: border-box;
	}
	.filtres{
		font-size: 15px;
		margin-top: 28px;
	}
	.small-form{
		display: flex;
		justify-content: flex-start;
	}
	.group-eco{ /* economique of big resolution*/
		display: none;
	}
	.group-familial{/* familal of big resolution*/
		display: none;
	}

	.eco-small{/* money icon and the word "economique" together*/
	display: flex;
	align-items: center;
	box-sizing: border-box;
	}
	.money-small{ /*money icon*/
	display: flex;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 14px 12px 14px 12px;
	font-size: 15px;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
	}
	.eco-button-small{/* word "economique"*/
	display: flex;
	padding: 12px 18px 12px 48px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	font-weight: bold;
	font-size: 14px;
	box-sizing: border-box;
	height: 44px;
	}
	.fam-small{ /* kid icon and the word "familial" together*/
		display: flex;
		box-sizing: border-box;
		margin-left: 6px;
	}
	.chil-small{/*child icon*/
		display: flex;
		background: #DEEBFF;
		border-radius: 50px 50px 50px 50px;
		padding: 12px 15px 12px 15px;
		font-size: 20px ;
		color: #0065FC;
		position: absolute; 
		box-sizing: border-box;
	}
	.fam-button-small{/* "word" familial */
		display: flex;
		padding: 12px 18px 12px 48px;
		background-color: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-width: 1px;
		border-radius: 50px 50px 50px 50px;
		font-weight: bold;
		font-size: 14px;
		box-sizing: border-box;
		height: 44px;
	}
	.group-romantic{  /* heart icon and the word "romantique" together*/
		display: flex;
		align-items: center;
		margin-right: 15px;
		box-sizing: border-box;
		margin-top: 15px;
	}
	.heart{/*heart icon*/
		display: flex;
		margin-right: 7px;
		background: #DEEBFF;
		border-radius: 50px 50px 50px 50px;
		padding: 12px 11px 10px 12px;
		font-size: 20px ;
		color: #0065FC;
		position: absolute; 
		box-sizing: border-box;
	}	
	.rom-button{/* "word" romantique */
		display: flex;
		padding: 12px 18px 12px 48px;
		background-color: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-width: 1px;
		border-radius: 50px 50px 50px 50px;
		border-left: none;
		font-weight: bold;
		font-size: 14px;
		box-sizing: border-box;	
		height: 44px;
	}
	.group-animaux{/* dog icon and "animaux autorisés" together*/
		display: flex;
		align-items: center;
		box-sizing: border-box;
		margin-top: 15px;
	}
	.dog{/* dog icon */
		display: flex;
		margin-right: 20px;
		background: #DEEBFF;
		border-radius: 50px 50px 50px 50px;
		padding: 12px 11px 12px 11px;
		font-size: 20px ;
		color: #0065FC;
		position: absolute; 
		box-sizing: border-box;
	}
	.anim-button{/* word "animaux autorisés" */
		display: flex;
		padding: 12px 18px 12px 48px;
		font-weight: bold;
		background-color: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-width: 1px;
		border-radius: 50px 50px 50px 50px;
		font-weight: bold;
		font-size: 14px;
		box-sizing: border-box;
		height: 44px;
	}
	.group-info{/* complementary phrase an information icon toghether*/
		display: flex;
		box-sizing: border-box;
		justify-content: flex-start;
		align-items: baseline;
		margin-top: 30px;
		padding-bottom: 30px;
		margin-top: 18px;
		min-width: 300px;
	}
	.fa-info{/* information icon*/
		display: flex;
		color: #0065FC;
		border-radius: 50px 50px 50px 50px;
		padding: 4px 7px 4px 7px;
		background: transparent;
		border: 2px solid #F2F2F2;
		box-sizing: border-box;
		font-size: 12px;
		margin-right: 10px;
	}
	.text-info{/* text:"Plus de 500 logements sont disponibles dans cette ville" */
		font-size: 14px;
	}
	.group-mars-and-pop{/* Layout of the first 2 sectors"Les plus populaires and activités Marseille"*/
		display: flex;
		flex-direction: column-reverse;
		margin: 0px;
	}
	.group-popular{/*first sector of small resolution"les plus populaires"*/
		background-color: #F2F2F2;
	}
	.pop-title-and-icon{/* first phrase:"Les plus populaires" and "chart line icon"*/
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		padding-top: 18px;
	}
	.titre-pop{/*big title of first sector "les plus populaires"(small resolution)*/
		font-size: 18px;
	}
	.fa-chart-line{/* icon chart-line*/
		font-size: 18px;
	}
	.all-art-pop{/* all articles of the second sector together(les plus populaires)*/
		box-sizing: border-box;
		margin: auto;
		margin-bottom: 30px;
	}
	.art-pop{/* each article of the second sector(les plus populaires)*/
		display: flex;
		border-radius: 20px 20px 20px 20px;
		box-shadow: 0px 0px 5px #EDEDED;
		margin-top: 8px;
		max-height: 140px;
		border-radius: 20px 20px 20px 20px;
		box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
	}
	.photos-popular{
		border: 5px solid white;
		border-radius: 20px 0px 0px 20px;
	}
	.conteneur-text-pop{/* white background behinde the text*/
		display: flex;
		flex-direction: column; 
		background-color: white;
		border-radius: 0px 20px 20px 0px;
		padding-left: 10px;
		margin-top: 0px;
	}
	.h2-pop{/* phrase"Hôtel Le Soleil du matin"*/
		font-size: 14px;
		margin-top: 10px;
		max-width: 150px;
	}
	.pop-price/* Phrase "Nuit à partir de 128€"*/
	{
		font-size: 13px;
		margin-top: 0px;
	}
	.star-group-pop{/*all stars together*/
		display: flex;
		box-sizing: border-box;
		margin-top: 24px;
	}
	.fa-star{/*icon etoile*/
		font-size: 9.5px;
		color: #0065FC;
		min-width: 11px;
	}
	.group-marseille{/*second sector of small resolution*/

	}
	.all-art-mars{/*all articles together "group Marseille"*/
		margin-top: 18px;
	}
	.titre-marseille{/* h1/ titre/ Hébergement à Marseille*/
		font-size: 18px;
		margin-top: 28px;
		margin-bottom: 0px;
	}
	.line1-art-mars{/* first 3 articles "one by one" */
	display: flex;
	flex-wrap: wrap;
	margin-top: 13px;
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
	}
	.photos-Marseille{/* photos of Marseille group */
		display: none;
	}
	.photos-small-mars{
		border-radius: 15px 15px 0px 0px;
		border: 5px solid white;
		margin: 0px;
	}
	.conteneur-text-mars{/*white background of the text*/
	box-sizing: border-box;
	background-color: white;
	border-radius: 0px 0px 15px 15px;
	padding-left: 13px;
	margin: 0px;
	}
	.h2-heb-mars{/*h2/ the name oh the hotel*/
		display: flex;
		font-size: 14px;
		margin-top: 3px;
		margin-bottom: 6px;

	}
	.price-heb-mars{/*info about the price*/
		font-size: 12px;
		margin: 0px;
	}
	.star-group-mars{
		display: flex;
		box-sizing: border-box;
		padding-bottom: 8px;
		margin-top: 6px;
	}
	#gray{
		color: gray !important;
	}
	.line2-art-mars{/* last 3 articles of group Marseille "one by one" */
		display: flex;
		flex-wrap: wrap;
		margin-top: 13px;
		border-radius: 20px 20px 20px 20px;
		box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
	}
	.plus-Marseille{/* last information phrase "Affichez plus of group Marseille"*/
		margin-top: 26px;
		font-weight :bold;
		font-size: 15px;
	}
	.group-act-mars{/* */
		margin-top: 46px;
	}
	.titre-act-marseille{/*Le titre du groupe Activités à Marseille */
		font-size: 18px;
	}
	.all-art-act-mars{/* all articles of group "Activités Marseille"*/
		margin-top: 24px;
		padding-bottom: 20px;
	}
	.art-act-m{/*articles of group "Activités Marseille" "one by one"*/
		border-radius: 20px 20px 20px 20px;
		box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
		margin-bottom: 20px;
	}
	.h2-act-mars{/* h2 / names of palces*/
		font-size: 14px;
		margin-left: 10px;
		margin-top: 11px;
		padding-bottom: 11px;
	}
	.photos-act-Marseille{/* big resolution photos*/
		display: none;
	}
	.small-res-photo-act-mars{ /* mobile photos*/
		border-radius: 15px 15px 0px 0px;
	}
	.sec3{
		padding-left: 23px;
		max-width: 366px;
		margin-top: 60px;
		padding-bottom: 60px;
	}
	.white-background3{
		background-color: white;
		border-radius: 0px 0px 15px 15px;
		padding-bottom:4px;
		padding-left: 19px;
		padding-top:10px;
		margin-top: -17PX;
	}
	footer{
		background-color: #F2F2F2;
		padding-bottom: 16px;
	}
	.footer-a{
		margin-top: 6px;
	}
	.group-footer{
		padding-top: 20px;
	}

	.h1-footer{
		font-size:14px;
	}
	.cols-footer{
		display: flex;
		flex-direction: column;
		font-size: 12px;
		padding-bottom: 30px;
		padding-top: 5px;
	}
	.footer-a{
		text-decoration: none;
		color: black;
		font-size: 14px;
	}
	@media (min-width: 375px) and (max-width: 413px)/* size: IPHONE 8*/{
		.menu-hébergement{
			padding-left: 55px;
			padding-right: 45px;
		}
		.menu-activités{
			padding-left: 70px;
			padding-right: 70px;
		}
		main{
			max-width: 375px;
		}
	}
	@media (min-width: 414px) and (max-width: 767px)/* size: IPHONE 8 PLUS*/{
		.menu-hébergement{
			padding-left: 85px;
			padding-right: 50px;
		}
		.menu-activités{
			padding-left: 50px;
			padding-right: 90px;
		}
		main{
			max-width: 767px;
		}
	}
	}
	

css iPad


	@media (min-width: 768px) and (max-width: 1365px)/* size: ipad mini*/{
		body{
			margin: 0 auto;
		}
		main{
			max-width: 833px;
		}
		.big-res-header{
			display: none;
		}
		.mobile-res-header{
			display: none;
		}
		.ipad-header{
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			max-width: 700px;
			margin: auto;
		}
		.nav-menu-ipad{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			min-width: 350px;
		}
		.hébergement-header{
			display: flex;
			box-sizing: border-box;
			border-top: 2px solid #0065FC;
			border-bottom: none;
		 	align-items: center;
		 	padding-top: 30px;
		 	padding-right: 35px;
		 	padding-left: 35px;
		 	text-decoration: none;
		 	color: #0065FC;
		}
		.activités-header{
			border-bottom: none;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			color: black;
			padding-top: 30px;
			text-decoration: none;
			margin-right: 14px;
		}
		.inscription-header{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-top: 30px;
			text-decoration: none;
			color: #0065FC;
			font-weight: bold;
		}
		.logo-ipad{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-top: 30px
		}
		.sides-small-res{
			max-width: 680px;
			margin: auto;
		}
		.group-filtres{
			display: flex;
			align-items: baseline;
			margin-top: 12px;
		}
		.small-form{/* group form écnomique*/
			margin-left: 5.5px;
		}
		.fam-small{/* group form Familial*/
			margin-left: 5.5px;
		}
		.group-romantic{/* group form romantique*/
			margin-left: 5.5px;
		}
		.group-animaux{/* animaux autorisés*/
			margin-left: -4.5px;
		}
		.eco-button-small{/*text "économique"/ ipad mini768px(7,9 pouces*/
			padding-left: 48px;
			width: 148px;
		}
		.fam-button-small{/*text "familial"/ ipad mini768px(7,9 pouces*/
			padding-left: 50px;
			width: 118px;
		}
		.rom-button{/*text "romantique"/ ipad mini768px(7,9 pouces*/
			padding-left: 48px;
			width: 144px;
		}
		.anim-button{/*text "animaux autorisés"/ ipad mini768px(7,9 pouces*/
			padding-left: 50px;
			width: 200px;
		}
		.all-art-pop{/*all articles of group populaire (ipad mini 768px)*/
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 30px;
			max-width: 688px;
			margin-top: 6px;
		}
		.art-pop{/*each article of group populaire (ipad mini 768px)*/
			margin-right: 40px;
			margin-bottom: 28px;
		}
		.photos-popular{/*photos of group populaire (ipad mini 768px)*/
			border: 6px solid white;
			border-radius: 20px 0px 0px 20px;
			margin-top: 0px;
		}
		.conteneur-text-pop{/* text container/group populaire (ipad mini 768px)*/
			 display: block;			
			 border-radius: 0px 20px 20px 0px;
			 padding: 0px;
			 padding-right: 20px;
			 width: 252px;
			 border: 6px solid white;
			 margin-top: 0px;
		}
		.h2-pop{/* h2 group populaire(ipad mini 768px)*/
			padding-left: 10px;
			max-width: 260px;
			padding-top: 4px;
		}
		.pop-price{/* Prix group populaire (ipad mini 768px)*/
			padding-left: 10px;
		}
		.star-group-pop{/* star group / group populaire(ipad mini 768px)*/
			padding-left: 10px;
			margin-top: 40px;
		}
		.group-marseille{/* group Marseille(ipad mini 768px)*/
			display: block;
		}
		.all-art-mars{/* All articles together /group populaire(ipad mini 768px)*/
			display: flex;
		    flex-wrap: wrap;
		    }		}
		.line1-art-mars{/* First 3 articles of group Marseille(ipad mini 768px)*/
			display: block;
		}
		.line2-art-mars{/*Last 3 articles of group Marseille(ipad mini 768px)*/
			display: block;
		}
		.marg-left-ipad{/* (ipad mini 768px)*/
			margin-left: 36px;
		}
		.marg-top-ipad{/* (margin-top of 4 last articles / group Marseille /ipad mini 768px)*/
			margin-top: 32px;
		}
		.titre-marseille{/* Title group Marseille(ipad mini 768px)*/
			margin-top: 42px;
		}
		.art-act-m{
			display: flex;
			flex-direction: row;
			margin-bottom: 32px;
			width: 518px;
			}
		.plus-Marseille{/* Last phrase /group Marseille(ipad mini 768px)*/
			margin-top: 40px;
			margin-bottom: 40px
		}
		.group-footer{/*  All tests together /footer /Activités Marseille (ipad mini 768px)*/
			display: flex;
			justify-content: space-between;
		}
		.titre-act-marseille{/*  Title /Activités Marseille (ipad mini 768px)*/
			margin-bottom: 34px;
		}
		.small-res-photo-act-mars{
			border-radius: 15px 0px 0px 15px;
		}
		.conteneur-text-act-mars{
			background-color: white;
			
		}
		.h2-act-mars{
			margin-top: 50px;
			margin-left: 20px;
		}
		@media (min-width:1024px) and (max-width:1365px){/* size: ipad pro 10,5 po & 12,9 pro*/
			

		}
	}

@Loussine , first off. I would advise providing a link to your project for easier debugging for us.

Now coming to your initial question, you can use media queries to make your webpage more responsive to change in screen size. Bootstrap provides an easier way to use media queries, you can try that too.

To top it off, you should consider using css preprocessors, they usually add some extra stuff to your code to make it more browser responsive.

Finally, consider cross browser testing to make sure you have it all done right.

Check out this webpage for more…

1 Like

This is impossible to debug without a live version, but my first try would be to put the CSS in one file instead of linking three different CSS files, and put the media queries into the file, instead of the <link> tag.

1 Like

@cacious8 Thank you very much :slight_smile:

@jsdisco Thank you :slight_smile:

  1. You are missing the doctype in the HTML.

  2. You have syntax errors in two of the CSS files (too many closing } and/or in the wrong position).

  3. Have you tried serving the file using a local server? VS Code has something like the Live Server extension you can use.

It would help if you made a repo for the site on Github so we can have an exact copy of your code.

1 Like

@lasjorg Thank you very much. At the moment I don’t know how to use Github.I’ll watch a tutorial about how to use it right now. :slight_smile:

You can use the file upload feature.

That way you do not have to learn about git first (you totally should learn git at some point though).

1 Like

@lasjorg I’ll do that, thank you very much for your help <3

1 Like

you’re most welcome .

1 Like