Responsive design par LayeBoly - page 1

Bonjour

Je développer un site pour une agence immobilière. J'ai adopté la stratégie mobile first pour la responsive design. Mon poblème est que le body ne prend pas toute la largeur de l'écran si je consulte le site sur mon smartphone. Ce qui que se répercute sur le menu du site ;

Je vous mets le code et la capture d'écran de mon smartphone

Merci de m'aider.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Holding CAFAO | Immobilier | Energie Solaire | E-commerce </title>


       <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/0a18f30492.js"></script>
        
                	 <link rel="stylesheet" href="/build/app.css">
        

    </head>
    <body>

    <div class="wrapper">
      
      <header>
        <div id="contact-wrapper">
        <div id="contact">
          <ul id="contact-phone-mail">
            <li><i class="fas fa-phone-alt"></i> +221 77 425 12 20</li>
            <li><i class="fas fa-envelope-open-text"></i> holdingcafao@hocafao.com</span></li>
          </ul>
          <div> 
            <ul id="contact-sociaux" class="flex">
              <li><i class="fab fa-facebook-f"></i></li>
              <li><i class="fab fa-twitter"></i></li>
              <li><i class="fab fa-youtube"></i></li>
            </ul>
          </div>

          <div><i class="fas fa-sign-in-alt"></i> Connexion</div>
          
        </div>

        </div>

          <div id="banniere-menu" class="container jumbotron" style="position: relative;">
            <div class="banniere">
              <a href="/">
              <img src="/images/LogoHoldingCAFAO.png" width="400px" height="200px" alt="">
              </a>
            </div>
            <div id="menu-symbol"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></div>
          </div>
        
         
        <nav>
          <ul class="navigation">
            <li id="menu-immoblier">
              <a href="">Immobilier</a>
              <ul id="sous-menu-immibilier">
                <li><a href="#">Réalisations</a></li>
                <li><a href="#">Projets en cours</a></li>
                <li><a href="#">Projet à venir</a></li>

              </ul>
            </li>
            <li id="menu-soliare">
              <a href="">Energie Solaire</a>
              <ul id="sous-menu-solaire">
                <li><a href="#">Panneaux Solaires</a></li>
                <li><a href="#">Kits solaires</a></li>
                <li><a href="#">Régulateurs</a></li>
                <li><a href="#">Convertisseurs</a></li>
                <li><a href="#">Ondulateurs</a></li>
                <li><a href="#">Régulateurs</a></li>
                <li><a href="#">Accessoires</a></li>
                <li><a href="#">Centrale Solaire</a></li>


          </ul>

            </li> 
            <li>Contact</li>
            <li>Contact</li>
          </ul>
        </nav>

          
        
      </header>

    </div>    

      
    		
    



        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Les fichier css :

/*Medium devices (tablets, less than 992px) */
@media (max-width: 575.98px) { 

	.wrapper{
		padding: 0px;
		margin: 0px;
	}

	#contact-wrapper{
		background-color: #2541b2;
		
	}

	.flex{
		display: flex;
	}

	#contact {
		margin-bottom: 5px;
		padding-bottom: 30px;
		padding-top: 5px;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		font-size: 40px;
		color: white;
		/*background-color: #2541b2; */
	}

	#contact-sociaux{
		flex-direction: row;
		justify-content: space-around;
		font-size: 50px;

	}
	.fab{
		font-size: 50px;
		color: white;
	}

	ul li {
		list-style-type: none;
	}

	#contact-phone-mail li, #contact-sociaux li{
		margin-top: 30px;

	}

	#menu-symbol{
		position: absolute;
	}
	
	
}

Enfin la capture d'écran de mon smartphone

Merci d'avance !

Responsive design

Responsive design

Supprimer

Modérer

Signaler le message aux modérateurs