Design site qui s'adapte aux différentes résolutions

Bonjour

Je suis en train de concevoir un site internet et j'ai remarqué que sur les grands écrans ca ne s'adaptait pas du tout ; cela fait vide . Je souhaiterai qu'il s'adapte automatiquement et je ne sais pas du tout comment faire . Est ce qu'il faut que je mette un max-width?
Je me suis chargée des media queries pour smartphonse et tablettes..
Mais la je sèche complètement .. Je suis débutante et je n'y vois pas franchement clair..
J'ai une <div ="bloc-page"> qui contient tout les éléments de ma page HTML . Et j'ai mis une width et un max width.


J'ai par exemple un diapo avec des phrases et un bouton dessus , qui sont positionné en absolute. Et du coup tout est décalé c'est affreux ....

Voila le code de ma partie diapo

<section id="diaporama">


	<div class="diaporama">

		<img src="images/enfant.jpg" alt="photo de pc" /> <!-- Image PC --> <!-- Image diapo-->
			<!--<div class="demi-cercle-droit"> </div>-->
			<div class="fleche-droite"> <i class="fas fa-angle-right"></i> </div>
 			<!--<div class="demi-cercle-gauche"> </div>-->
			<div class="fleche-gauche"> <i class="fas fa-angle-left"></i> </div> 
		

		<h1 class="titre-principal"> <span>WEBAGENCY</span>:L'AGENCE DE TOUS</br> VOS PROJETS ! </h1>
				<p class="presentation"> Vous avez un projet web ? la Webagency vous aide à le réaliser!</p>
		
		
				<a href="#info"><input type="button"value="Plus d'infos" class="bouton-info"> </a>
	</div>

</section>

.diaporama img
{
   margin-top:20%;
   width:100%;
   height:auto;
   margin-top:10%;
    
}

.titre-principal /* Titre sur diapo */
{
     position: absolute;
     top: 40%;
     left: 10%;

     
}


.presentation /* Phrase sur diapo */
{
    position: absolute;
     top:60%;
    left:10%;
    
}

.bouton-info
{
    width: 100px;
    height:40px;
    margin-left: 120px;
    position: absolute;
    top:70%;
    
    
}

Merci par avance pour vos lumières...

Salut,

J'ai pas très très bien compris ce que tu voulais faire...

pour faire du responsive sur les grand écran tu peux utiliser min-width:

@media (min-width: 1200px) {
        /* code */
}

Ici le code ne sera pris en compte qu'avec une largeur d'au minimum 1200px.
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Pour le reste comme le diaporama effectivement tu peux donner des max-width et max-height pour pas que ça soit trop grand.

Je te recommande la lecture de ce tutoriel https://www.alsacreations.com/article/lire/1615-Cest-quoi-le-Responsive-Web-Design-.html