Partage
  • Partager sur Facebook
  • Partager sur Twitter

Medias query

petites résolutions

Sujet résolu
Anonyme
    15 septembre 2019 à 18:42:44

    Bonjour, chères consoeurs, chers confrères,

    Je vous sollicite encore une fois pour un problème que je n'arrive pas à résoudre, il s'agit des médias query, je viens de créer mon premier site et en voulant le rendre responsive j'ai buté sur un obstacle que je n'ai pas pu surmonter, car quand travaille les petites résolutions il reste toujours une large bande vide à droite de l'écran et je ne sais vraiment pas quoi faire pour l'éliminer, cela fait 2 ou 3 jours que je patauge là-dedans, si vous pouvez m'aider vous me rendrez un très grand service, merci beaucoup de vos réponses.

    Heddad Djaffar

    • Partager sur Facebook
    • Partager sur Twitter
    ChrisLebure
      15 septembre 2019 à 19:17:13

      Bonjour,

      nous avons besoin du code (HTML et CSS) pour analyser le problème et aider

      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        16 septembre 2019 à 1:12:22

        Bonsoir,

        Oui volontier, voici ci-dessous les fichiers html css et medias querry, merci de votre réponse.

        <!DOCTYPE html>

        <html lang="fr">

        <head>

            <meta charset="UTF-8">

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title>Agence immobilière Elbeït</title>

            <link rel="stylesheet" href="css/style.css">

            <link rel="stylesheet" href="css/baseMedias.css">

            <!-- Favicon -->

            <link rel="icon" href="photos/favicon.png" type="image/x-icon">

            <!-- Polices de caractères -->

            <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">

            <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

            <!-- Font-Awesome -->

            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"

                crossorigin="anonymous">

            <!-- Feuilles de style -->

            <link rel="stylesheet" media="only screen and (width: 320px) and (height: 480px)" href="CSS/iphone4.css">

            <link rel="stylesheet" media="only screen and (width: 768px) and (height: 1024px)" href="CSS/iPad_Mini.css">

            <link rel="stylesheet" media="only screen and (width: 360px) and (height: 640px)" href="CSS/galaxy_S5.css">

            <link rel="stylesheet" media="only screen and (width: 411px) and (height: 731px)" href="CSS/pixel2.css">

            <link rel="stylesheet" media="only screen and (width: 320px) and (height: 568px)" href="CSS/iPhone5_SE.css">

            <link rel="stylesheet" media="only screen and (width: 375px) and (height: 667px)" href="CSS/iPhone6_7_8.css">

            <link rel="stylesheet" media="only screen and (width: 414px) and (height: 736px)" href="CSS/iPhone6_7_8PLUS.css">

            <link rel="stylesheet" media="only screen and (width: 1024px) and (height: 1366px)" href="CSS/iPadPro.css">

            <!-- Jquery -->

            <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

            <!-- GreenSock -->

            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

            <STYLE>A {text-decoration: none;} </STYLE>

        <body>

            <!-- Accueil -->

            <header id="accueil">

                <nav id="navigation">

                    <a href="http://heddaddjaffar.net/index.html" target="_blank" class="liensNav"  onclick="toggleNav()">Accueil</a>

                    <a href="#valeurs" class="liensNav" onclick="toggleNav()">Nos Valeurs</a>

                    <a href="#tarifs" class="liensNav" onclick="toggleNav()">Nos Tarifs</a>

                    <a href="#contact" class="liensNav" onclick="toggleNav()">Contact</a>

                    <a class="icon" id="icon" onclick="toggleNav()"><i class="fas fa-bars"></i></a>

                </nav>

                <img src="photos/ab1.jpg" alt="Bannière">

                <h1>Votre agence immobilière</h1>

                <h2>Honnêteté, Sérieux et Compétence</h2>

                <a href="#section-about" id="arrow"><i class="fas fa-home"></i></a>

            </header>

            </header>

            <!-- Section About -->

            <section id="section-about" class="section-about">

                <div class="centerH">

                    <h2 class="titreAbout">

                        Nos Valeurs

                    </h2>

                </div>

                <div class="row">

                    <div class="col-1-of-2">

                        <h3 class="sousTitreAbout">Offrez-vous le bien immobilier<br> de vos rêves</h3>

                        <p class="paragraphe">

                            Notre premier souci est, faire en sorte que notre client soit satisfait de la manière dont nous nous occupons de lui et, lui trouver le bien immobilier qui lui convienne parfaitement. Nos agents ont tous une longue expérience derrière eux, ils savent trés bien quel est le produit qui convient à chaque demande, que ce soit pour louer, acheter ou vendre. Vous pouvez avoir confiance en nous, on fera le maximum pour que vous soyez pleinement satisfait, on tient absolument à ne pas vous décevoir.

                        </p>

                    </div>

                    <div class="col-1-of-2">

                        <div class="composition">

                            <a href="images/page2.html" target="_blank"><img src="photos/h8.jpg" title="Cliquer pour voir les produits diponible" alt="photo d'illustration pour les produits immobiliers 1" class="composition_photo composition_photo--1">

                            <a href="http://heddaddjaffar.net/index.html" target="_blank"><img src="photos/d4.jpg" title="Cliquer pour voir les produits diponible" alt="photo d'illustration pour les produits immobiliers 2" class="composition_photo composition_photo--2">

                            <a href="http://heddaddjaffar.net/index.html" target="_blank"><img src="photos/e5.jpg" title="Cliquer pour voir les produits diponible" alt="photo d'illustration pour les produits immobiliers 3" class="composition_photo composition_photo--3">

                        </div>

                    </div>

                </div>

            </section>

            <!-- Section Tarifs -->

            <section id="tarifs">

                <h2>Nos Tarifs</h2>

                <div id="containerFlex">

                    <div class="flexCards">

                        <div class="head">

                            <p>Location</p>

                        </div>

                        <div class="prix">

                            <p>En ce qui concerne les produits loués, l'agence facture ses préstations à raison de la somme de un mois de loyer, c'est à dire si le loyer a été convenu et fixé entre les clients à 30.000 DZ par mois l'agence a droit à 30.000 DZ pour sa préstation.</p>

                        </div>

                    </div>

                    <div class="flexCards">

                        <div class="head">

                            <p>Vente de moins de 10 millions de DZ</p>

                        </div>

                        <div class="prix">

                            <p>Pour les produits vendus par l'intermediaire de l'agence, dont le prix de 

                                vente a été fixé et conclu entre le vendeur et l'acheteur à moins de 10.000.00 DZ, l'agence 

                                facture sa préstation à raison d'une commission de 3 % sur la somme totale de la vente, 

                                c'est à dire si la somme de la vente a été fixée à 9.000.000 DZ, l'agence a droit 270.000 

                                DZ de commission pour sa préstation</p>

                        </div>

                    </div>

                    <div class="flexCards">

                        <div class="head">

                            <p>Vente de plus de 10 millions de DZ</p>

                        </div>

                        <div class="prix">

                            <p>Pour les produits vendus par l'intermediaire de l'agence, dont le prix de 

                                vente a été fixé et conclu entre le vendeur et l'acheteur à plus de 10.000.00 DZ, l'agence 

                                facture sa préstation à raison d'une commission de 1 % sur la somme totale de la vente, 

                                c'est à dire si la somme de la vente a été fixée à 50.000.000 DZ, l'agence a droit 500.000 

                                DZ de commission pour sa préstation</p>

                        </div>

                    </div>

            </section>

            <!-- Sections Phrases Slide -->

            <section id="phrasesSlide">

                <div class="cadre">

                    <div class="centre">

                        <div class="carousel">

                            <div class="changeHidden">

                                <div class="contenant">

                                    <div class="element">"Bienvenue chez nous"</div>

                                    <div class="element">"longue expérience"</div>

                                    <div class="element">"Savoir faire et conseils"</div>

                                    <div class="element">"Assistance de A à Z"</div>

                                    <div class="element">"Assistance de A à Z"</div>

                                    <div class="element">"Bienvenue chez nous"</div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

            <!-- Section Équipe -->

            <section id="equipe">

                <h2>Il est temps de rencontrer l'équipe</h2>

                <p>Voici ci-dessous l'équipe qui va vous servir et vous accompagner<br>durant tout le processus d'une transaction</p>

                <div class="containerFlexTeam">

                    <div class="team">

                        <div class="teamPic pic1"></div>

                        <div class="sousTxt">

                            <h4>Abdelouahab<br>Gérant directeur</h4>

                            <p></p>

                        </div>

                    </div>

                    <div class="team">

                        <div class="teamPic pic2"></div>

                        <div class="sousTxt">

                            <h4>Boualem<br>Responsable des locations</h4>

                            <p></p>

                        </div>

                    </div>

                    <div class="team">

                        <div class="teamPic pic3"></div>

                        <div class="sousTxt">

                            <h4 id="lm1">Tayeb<br>Responsable des ventes</h4>

                            <p></p>

                        </div>

                    </div>

                </div>

            </section>

            <!-- Contact Section -->

            <section class="p-5 bg-light">

                <div class="container-fluid">

                  <div class="row mb-12">

                    <div class="col text-center">

                      <h3 class="text-warning display-5 font-weight-bold">Contactez-moi</h3>

                      <p class="lead text-justify font-weight-bold">

                        <h4>Haouet Abdelouahab</h4>

                        <h5>tel fixe : xxx xx xx xx<br>tel mobile: xxx xx xx xx </h5>

                        <h6>E.mail : xxxx99@xxxxx.com</h6>

                      </p>

                    </div>

                  </div>

                </div>

                  <!-- END OF TITLE -->

              </section>    

                  <!--..................réseaux sociaux........................-->

                  <section id="contact">

                    <div class="flexMedias">

                        <div class="medias">

                            <a href="https://www.facebook.com/djaffar.heddad/" target="_blank">

                                <img id="st1" src="photos/FB.png" style="box-shadow:0px 0px 0px 0;">

                            </a>

                        </div>

                        <div class="medias">

                            <a href="https://www.twitter.com/" target="_blank">

                                <img id="st2" src="photos/TW.png" style="box-shadow:0px 0px 0px 0;>

                            </a>

                          </div> 

                        </div>

                        <div class="medias">

                            <a href="https://www.linkedin.com/in/djaffar-heddad-288276a5/" target="_blank">

                                <img id="st3" src="photos/DIN.png" style="box-shadow:0px 0px 0px 0;></a>

                        </div>

                      </div>

                        <div class="medias">

                          <a href="https://www.instagram.com/heddad_djaffar/" target="_blank">

                              <img id="st4" src="photos/INSTA.png" style="box-shadow:0px 0px 0px 0;"></a>

                        </div>

                        <div class="medias">

                          <a href="https://secure.skype.com/portal/overview" target="_blank">

                              <img id="st5" src="photos/SKY.png" style="box-shadow:0px 0px 0px 0;"></a>

                        </div>

                    </div>

                    </div>

                    <a href="#" title="Retour haut de page"><img src="photos/flèche2.png" alt="flèche de redirection vers le haut" data-jpibfi-post-excerpt="" data-jpibfi-post-url="http://www.cdl-graphicart.com/ajouter-bouton-retour-vers-haut-page/" data-jpibfi-post-title="Ajouter un bouton de retour vers le haut de la page [wp+blogger]" id="qr">

                </section>

            <script src="js/app.js"></script>

            <script src="js/greenSock.js"></script>

        </body>

        </html>

        CSS :

        html {

            font-size: 62.5%;

        }

        body {

            margin: 0;

            padding: 0;

            font-family: georgia;

            background-color: #373737;

        }

        /* Navigation */

        #navigation {

            position: fixed;

            z-index: 40;

            width: 100%;

            background-color: #f0Ead6;

            text-align: center;

            height: 10rem;

            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 55% 70%, 50% 90%, 45% 70%, 0% 70%);

            transition: all 0.4s ease-in-out;

            /* anim GS */

            opacity: 0;

        }

        #navigation a {

            text-decoration: none;

            font-size: 3rem;

            padding: 1rem 5rem;

            line-height: 6.5rem;

            font-family: 'Kaushan Script';

            margin: auto;

            color: #373737;

        }

        #navigation a:active {

            font-size: 4rem;

        }

        .icon {

            display: none;

        }

        /* Header accueil */

        header img {

            width: 100%;

            height:100vh;

            margin-top: 5rem;

        }

        header {

            height: 100vh;

            width: 100%;

            background-size: cover;

            background-position: center;

        }

        h1 {

            position: absolute;

            text-align: center;

            text-align: inline-block;

            margin: 0;

            color: #F31AFA;

            position: relative;

            margin-top: -47rem!important;

            font-family: 'broadway';

            font-size: 9rem;

            /* Anim GS */

            opacity: 0;

        }

        header h2 {

            text-align: center;

            margin: 0;

            color: #F31AFA;

            position: relative;

            margin-top: 4.5rem;

            font-family: 'georgia';

            font-size: 6rem;

            letter-spacing: 0.2rem;

            /* Anim GS */

            opacity: 0;

        }

        header #arrow {

            color: black;

            height: 8rem;

            width: 8rem;

            position: absolute;

            top: 95%;

            left: 52%;

            transform: translate(-50%, -50%);

            font-size: 4rem;

            line-height: 8rem;

            text-align: center;

            text-decoration: none;

            border-radius: 50%;

            background: white;

            box-shadow: 0 0 0 0 #fff;

            animation: pulse 1.3s infinite;

            /* Anim GS */

            opacity: 0;

        }

        @keyframes pulse {

            to

            {

                box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0.01);

            }

        }

        /* première section About avec 3 photos */

        .section-about {

            background-color: #373737;

            padding-bottom: 20rem;

        }

        .centerH {

            text-align: center!important;

            margin-bottom: 8rem!important;

        }

        .titreAbout {

            font-size: 5.5rem;

            text-transform: uppercase;

            font-weight: 700;

            display: inline-block;

            background-image: linear-gradient(to right, yellow, #C0b283);

            -webkit-background-clip: text;

            background-clip: text;

            color: transparent;

            letter-spacing: .2rem;

            padding-top: 10rem;

        }

        .row {

            max-width:114rem;

            margin: 0 auto;

        }

        .row::after {

            content: "";

            display: table;

            clear: both;

        }

        .row [class^="col-"] {

            float: left;

        }

        .row [class^="col-"]:not(:last-child) {

            margin-right: 6rem;

        }

        .row .col-1-of-2 {

            width: calc((100% - 6rem) / 2);

        }

        .sousTitreAbout {

            font-size: 1.9rem;

            font-weight: 600;

            margin-left : 2.5rem;

            display: inline-block;

            text-align: center;

            text-transform: uppercase;

            color: #FF0040;

        }

        .paragraphe {

            width: 80%;

            height: 50%;

            font-size: 1.9rem;

            font-weight: 600;

            color: #DF01D7;

            margin-left: 1rem;

        }

        .paragraphe:not(:last-child) {

            margin-bottom: 3rem;

        }

        .composition {

            position: relative;

        }

        .composition_photo {

            width: 35rem;

            height: 25rem;

            box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);

            border-radius: 2px;

            position: absolute;

            z-index: 10;

            transition: all .2s;

            outline-offset: 2rem;

        }

        .composition_photo--1 {

            margin-left: 48rem;

            margin-top: -40rem;

        }

        .composition_photo--2 {

            margin-left: 75rem;

            top: -30rem;

        }

        .composition_photo--3 {

            margin-left: 60rem;

            top: -15rem;

        }

        .composition_photo:hover {

            outline: 1.5rem solid #C0b283;

            transform: scale(2) translateY(-0.5rem);

            box-shadow: 0 2.5rem 4rem rgba(0,0,0,0.5);

            z-index:30;

        }

        .composition:hover .composition_photo:not(:hover) {

            transform: scale(0.95);

        }

        /* ....................Section Tarifs............. */

        #tarifs h2 {

            text-align: center;

            font-size: 5.5rem;

            background: #f7f7f7;

            display: inline-block;

            margin-left: 50rem!important;

            background-image: linear-gradient(to right, yellow, rgb(255,239,185));

            -webkit-background-clip: text;

            background-clip: text;

            color: transparent;

            margin: 0;

            padding-top: 4rem;

        }

        #containerFlex {

            background: #373737;

            width: 100%;

            height: 60rem;

            display: flex;

            align-items: center;

            justify-content: center;

            padding-bottom: 8rem;

        }

        .flexCards {

            width: 30rem;

            height: 40rem;

            margin: 2rem;

            transition: all 0.2s ease-in;

            background: #F0Ead6;

        }

        .flexCards:nth-child(1) {

            border: 1px dashed #373737;

        }

        .flexCards:nth-child(2) {

            border: 1px dashed #373737;

        }

        .flexCards:nth-child(3) {

            border: 1px dashed #373737;

        }

        .head {

            width: 100%;

            text-align: center;

            color: #FF0040;

            background: #F0Ead6;

        }

        .head p {

            margin: 0;

            font-size: 3rem;

            font-weight: 700;

            line-height: 4rem;

            padding: 2rem;

            font-family: 'georgia';

            text-decoration: none;

        }

        .contenu {

            margin: auto;

            text-align: center;

            font-size: 1.6rem;

            background: #f0Ead6;

            height: 6rem;

            line-height: 6rem;

        }

        .prix {

            margin: 0;

            height: 20rem;

            background: #f0Ead6;

        }

        .prix p {

            margin: 0 auto;

            font-size: 1.5rem;

            justify-content: left;

            font-weight: 700;

            text-align: center;

            line-height: 2rem;

            font-family: 'georgia';

            color: #835910;

        }

        .flexCards:hover {

            transform: scale(1.05);

        }

        /*............. Section Phrases Slide ................*/

        #phrasesSlide {

            height: 60rem;

            width: 100%;

            background: url(../photos/a1.jpg);

            background-size: cover;

            background-position: center;

            position: relative;

        }

        .cadre {

            position: absolute;

            top: 50%;

            left: 50%;

            width: 110rem;

            height: 40rem;

            transform: translate(-50%,-50%);

            border-radius: 2px;

            background: rgba(55,55,55,0.0);

            color: white;

        }

        .centre {

            position: absolute;

            top: 50%;

            left: 0;

            right: 0;

            margin-top: -2.25rem;

        }

        .carousel {

            position: relative;

            width: 100%;

            height: 4.5rem;

            text-align: center;

            line-height: 45px;

        }

        .carousel .changeHidden{

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            margin: auto;

            height: 13rem;

            line-height: 13rem;

            width: 100rem;

            overflow: hidden;

        }

        .carousel .changeHidden .contenant {

            position: relative;

            animation: carousel 10s ease-in-out infinite;

        }

        .carousel .changeHidden .element {

            font-weight: 700;

            font-size: 8rem;

        }

        @keyframes carousel {

            0%, 20% {

                transform: translateY(0);

            }

            20%, 40% {

                transform: translateY(-10rem);

            }

            40%, 60% {

                transform: translateY(-20rem);

            }

            60%, 65% {

                transform: translateY(-25rem);

            }

            65%, 70% {

                transform: translateY(-30rem);

            }

            70%, 75% {

                transform: translateY(-35rem);

            }

            75%, 80% {

                transform: translateY(-40rem);

            }

            80%, 90% {

                transform: translateY(-45rem);

            }

            90%, 95% {

                transform: translateY(-50rem);

            }

            100% {

                transform: translateY(-60rem);

            }

        }

        /*....................Section Équipe .............*/

        #equipe {

            height: 72rem;

            width: 100%;

            background: #373737;  

            padding-bottom: 10rem;

        }

        #equipe h2 {

            text-align: center;

            display: inline-block;

            margin-left: 17rem;

            font-size: 5.5rem;

            background-image: linear-gradient(to right, yellow, #c0b283);

            -webkit-background-clip: text;

            color: transparent;

            margin-bottom: 0;

        }

        #equipe p {

            text-align: center;

            display: inline-block;

            font-size: 2rem;

            font-weight: 600;

            color: #FF0040;

            margin-left: 32rem;

        }

        .containerFlexTeam {

            width: 100%;

            height: 60rem;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .team {

            height: 50rem;

            width: 40rem;

            background: #f7f7f7;

            margin: 5rem;

            overflow: hidden;

        }

        .sousTxt {

            width: 100%;

            height: 20%;

            text-align: center;

            display: inline-block;

            z-index: 2;

            background: rgb(211,203,178);

        }

        .sousTxt h4 {

            font-size: 2.6rem!important;

            margin-top: 11px;

            color: #FF0040;

        }

        .teamPic {

            width: 100%;

            height: 80%;

            position: relative;

            z-index: 1;

            transition: all 0.4s ease-in-out;

        }

        .pic1 {

            background:url("../photos/j9.jpg");

            background-position: 42% 50%;

        }

        .pic1:hover{

            transform: scale(1.2);

        }

        .pic2 {

            background:url("../photos/k10.jpg");

            background-position: 49% 5%;

        }

        .pic2:hover{

            transform: scale(1.2);

        }

        .pic3 {

            background:url("../photos/L11.jpg");

            background-position: 56% 0%;

        }

        .pic3:hover{

            transform: scale(1.2);

        }

        /* Section Contact */

        .p-5 {

            height: 28rem;

        }

        .p-5 h3 {

            position: absolute;

            text-align: center;

            display: inline-block;

            font-size: 5.5rem;

            background-image: linear-gradient(to right, yellow, #c0b283);

            -webkit-background-clip: text;

            color: transparent;

            margin-top: -2rem!important;

            left: 44.5rem;

        }

        .p-5 h4 {

            text-align: center;

            display: inline-block;

            font-size: 3rem;

            margin-left: 38rem!important;

            margin: 0;

            margin-top: 6rem;

            color: #04B404;

        }

        h5 {

            text-align: center;

            display: inline-block;

            font-size: 3rem;

            margin-left: 36rem!important;

            line-height: 7rem;

            margin: 0;

            margin-top: 3rem;

            color: #04B404;

        }

        h6 {

            text-align: center;

            display: inline-block;

            font-size: 3rem;

            margin-left: 32rem!important;

            line-height: 7rem;

            margin: 0;

            margin-top: 3rem;

            color: #04B404;

        }

        #contact {

            margin-left: -3rem;

        }

        #st1 {

            position: absolute;

            margin-top: 10rem;

            left: 44rem;

        }

        #st2 {

          margin-top: 10rem;

         margin-left: 55rem;

        }

        #st3 {

            position: absolute;  

            margin-top: 10rem;

            margin-left: 2rem;

        }

        #st4 {

          position: absolute;

          margin-top: 10rem;

          margin-left: 10rem;

        }

        #st5 {

           position: absolute;

           margin-top: -5.5rem;

           margin-left: 80rem;

         }

         #qr {

           position: absolute;

           width : 60px;

           height : 55px;

           margin-left: 115rem!important;

           margin-top: -10rem!important;

        }   

        medias querry :

        /* NAVIGATION */

        @media (max-width: 1200px) {

           #navigation {

            width: 1200px!important;

        }

            #navigation a {

                font-size: 2.2rem;

                padding: 1rem 5rem;

            }

        }

        @media (max-width: 768px) {

            #navigation {

                width: 768px!important;

            }

        #navigation a:not(:nth-child(5)) {

            display: none;

        }

        .icon {

            display: block;

            position: absolute;

            right: -3rem;

            top: -1.6rem;

            cursor: pointer;

            color: #373737;

            font-size: 3rem!important;

        }

        #navigation {

            width: 768px;

            text-align: center;

            height: 5rem;

            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

            transition: all 0.4s ease-in-out;

            border-bottom: 2px solid #373737;

        }

        #navigation.responsive {

            height: 38rem;

        }

        #navigation.responsive a:not(:nth-child(5)) {

            display: block;

            text-align: center;

            background: #F0EAd6;

            margin: 0;

            position: relative;

            top: 4rem;

            font-size: 3rem;

        }

        }

        @media (max-width: 425px) {

            #navigation {

            width: 425px!important;

        }

        }

        @media (max-width: 320px) {

            #navigation {

            width: 32rem;

        }

        }

        /*-------------- Page D'accueil ----------------*/

        @media (max-width: 1200px) {

            header {

                position: absolute;

                width: 100%;

                height: 90vh;

            }

            header img {

                position: absolute;

                width: 1200px;

                height:100vh;

                margin-top: 5rem;

            }

            h1 {

                position: absolute;

                margin-top: 21rem!important;

                left: 2.8rem;

                font-size: 8rem;

            }

            header h2 {

                margin-top: 34rem;

                font-size: 5rem;

            }

            header #arrow {

                height: 6rem;

                width: 6rem;

                margin-top: 5%;

                font-size: 3.5rem;

                line-height: 6rem;

            }

        }

        @media (max-width: 992px) {

            header {

                height: 80vh;

            }

            h1{

                position: absolute;

                margin-top: 24rem!important;

                display: inline-block;

                left: 12rem;

                font-size: 6rem;

            }

            header h2 {

                display: inline-block;

                margin-top: 34rem;

                margin-left: 17rem;

                font-size: 4rem;

            }

            header #arrow {

                margin-top: 11%;

                margin-left: 10.5rem;

            }

        }

        @media (max-width: 768px) {

            header {

                height: 73vh;

            }

            header img {

                width: 768px;

            }

            h1 {

                top: 1rem;

                font-size: 4rem;

                display: inline-block;

                margin-left: -3rem;

            }

        header h2 {

            top: 33rem;

            font-size: 3rem;

            display: inline-block;

            left: 7.1rem;

            width: 80%;

            margin: auto;

        }

        header #arrow {

            height: 5rem;

            width: 5rem;

            top: 97%;

            font-size: 2.5rem;

            line-height: 5rem;

        }

        }

        @media (max-width: 720px) {

            h1 {

                top: 22rem;

                font-size: 5rem;

            }

        }

        @media (max-width: 559px) {

            h1{

                top: 22rem;

                font-size: 4.4rem;

            }

        }

        @media (max-width: 497px) {

            header{

                height: 60vh;

            }

            h1 {

                top: 20rem;

                font-size: 4.3rem;

                line-height:5.5rem;

            }

            header h2 {

                top: 22rem;

                font-size: 2rem;

                width: 50%;

            }

            header #arrow {

                height: 4.5rem;

                width: 4.5rem;

                top: 54%;

                font-size: 2.5rem;

                line-height: 4.5rem;

            }

        }

        @media (max-device-width: 425px) {

            header img {

                width: 425px;

                height:100vh;

                margin-top: 5rem;

            }

          h1 {

              position: absolute;

              margin-top: 10rem!important;

              display: inline-block;

              font-size: 2.5rem;

             margin-left: -9.5rem!important;

          }

          header h2 {

            position: absolute;

            margin-top: 15rem!important;

            display: inline-block;

            margin-left: -8rem!important;

              font-size: 2rem;

              letter-spacing: 1px;

              width: 100%;

          }

          header #arrow {

            height: 3rem;

            width: 3rem;

            top: 90rem;

            left: 6rem;

              font-size: 2.5rem;

              line-height: 4.5rem;

          }

        }

        @media (max-device-width: 320px) {

            header img {

                width: 320px;

                height:100vh;

                margin-top: 5rem;

            }

          h1 {

              position: absolute;

              margin-top: 20rem!important;

              display: inline-block;

              font-size: 2rem;

             margin-left: -11rem!important;

          }

          header h2 {

            position: absolute;

            margin-top: 26rem!important;

            display: inline-block;

            margin-left: -7rem!important;

              font-size: 1.5rem;

              letter-spacing: 1px;

              width: 100%;

          }

          header #arrow {

              height: 3rem;

              width: 3rem;

              top: 90rem;

              left: 6rem;

              font-size: 2rem;

              line-height: 3rem;

          }

        }

        /*................ Medias Section About ............*/

        @media (max-width: 1200px) {

            .titreAbout {

                margin-top: 100rem;

                font-size: 4.5rem;

            }

            .paragraphe {

                margin-left: 3.5rem;

            }

            .composition_photo--1 {

                left: 2rem;

                top: 2rem;

            }

            .composition_photo--2 {

                left: 6rem;

                top: -32rem;

            }

            .composition_photo--3 {

                left: 4rem;

                top: -16rem;

            }

        }

        @media (max-width: 992px) {

            .section-about {

                height: 110rem;

            }

            .titreAbout {

                margin-top: 100rem;

                margin-left: 15rem;

            }

            .paragraphe {

                margin-left: 3.5rem;

            }

            .composition_photo--1 {

                left: 2rem;

                top: -2rem;

            }

            .composition_photo--2 {

                left: -2rem!important;

                top: -36rem;

            }

            .composition_photo--3 {

                left: 5rem;

                top: -18rem;

            }

        }

        @media (max-width: 900px) {

            .section-about {

                padding: 0 0 5rem 0;

            }

            .centerH {

                margin-bottom: 2rem!important;

            }

            .titreAbout {

                font-size: 4rem;

            }

            .row {

                max-width: 50rem;

                padding: 0 3rem;

            }

            .row [class^="col-"]:not(:last-child) {

                margin-right: 0;

                margin-bottom: 6rem;

            }

            .row [class^="col-"] {

                width: 100%!important;

            }

            .composition_photo {

                float: left;

                position: relative;

                width: 33.333333%

            }

            .composition_photo--1 {

                top: 0;

                transform: scale(1.2);

            }

            .composition_photo--2 {

                top: -1rem;

                transform: scale(1.3);

                z-index: 20;

            }

            .composition_photo--3 {

                top: 1rem;

                left:0;

                transform: scale(1.1);

            }

        }

        @media (max-width: 768px) {

            .section-about {

                height: 165rem!important;

            }

            .titreAbout {

                margin-top: 93rem;

                margin-left: 2rem!important;

                font-size: 3.7rem;

            }

            .sousTitreAbout {

                position: absolute;

                margin-left: -8.5rem!important;

                display: inline-block;

                width: 90%;

                font-size: 1.5rem;

                margin-top: -2rem;

            }

            .paragraphe {

                width: 100%;

                height: 30%;

                margin-left: 3rem;

                margin-top: 4rem;

            }

            .composition_photo--1 {

                width: 27rem;

                height: 20rem;

                left:-55rem;

                top: 35rem;

            }

            .composition_photo--2 {

                width: 25rem;

                height: 18rem;

                margin-left: 30rem;

                top: -6rem;

            }

            .composition_photo--3 {

                width: 28rem;

                height: 20rem;

                left: -48rem;

                top: -7rem;

            }

        }

        @media (max-width: 600px) {

            .titreAbout {

                font-size: 3rem;

            }

        }

        @media (max-width: 425px) {

            .section-about {

                height: 255rem;

            }

            .titreAbout {

                margin-top: 100rem;

            font-size: 2.5rem;

        }

            .sousTitreAbout {

                margin-left: -0.1rem!important;

            }

            .paragraphe {

                margin-left: -0.01rem;

            }

            .composition_photo--1 {

                position: absolute;

                width: 18rem;

                height: 13rem;

                margin-left: 55rem;

                margin-top: -22rem;

            }

            .composition_photo--2 {

                width: 15rem;

                height: 10rem;

                margin-left: 19rem;

                top: -4rem;

            }

            .composition_photo--3 {

                width: 18rem;

                height: 13rem;

                left: -50rem;

                top: -5rem;

            }

        }

        @media (max-device-width:320px) {

            .section-about {

                height: 180rem;

            }

            .paragraphe {

                margin-left: 1rem;

            }

            .composition_photo--1 {

                width: 16rem;

                height: 10rem;

                left: -54rem;

                top: 18rem;

            }

            .composition_photo--2 {

                width: 14rem;

                height: 9rem;

                margin-left: 14rem;

                top: 1rem;

            }

            .composition_photo--3 {

                width: 16rem;

                height: 10rem;

                left: -55rem;

                top: 1rem;

            }

        }

        /* ..................Medias Tarifs................... */

        @media (max-width: 1200px) {

            #containerFlex {

                background: #373737;

                height: 50rem;

                width: 1200px;

            }

            #tarifs h2 {

                display: inline-block;

                width: 80%;

                margin-top: 5rem;

               margin-left: 6rem!important;

            }

        }

        @media (max-width: 992px) {

            #tarifs h2 {

                margin-top: 15rem;

               margin-left: 18rem!important;

            }

        }

        @media (max-width: 768px) {

            #tarifs {

                height: 160rem;

                margin-top: -5rem!important;    

        }

            #tarifs h2 {

                position: relative;

                font-size: 3.7rem;

                top: -20rem!important;

                margin-left: 10rem!important;

            }

            #containerFlex {

                height: 170rem;

                margin-top: 10rem!important;

                flex-direction: column;

        }

            .flexCards {

              margin-left: -38rem;

              margin-top: -88rem!important;

            }

        }

        @media (max-device-width: 425px) {

            #tarifs {

                height: 195rem;

            }

            #tarifs h2 {

                position: relative;

                margin-top: 21rem!important;

                margin-left: 4rem!important;

                font-size: 2.5rem;

            }

        .flexCards {

            margin-left: -74rem!important;

        }

        }

        @media (max-device-width: 320px) {

            #tarifs {

                height: 180rem;

            }

            #tarifs h2 {

                position: relative;

                top: -23rem!important;

                margin-left: 3rem!important;

            }

        .flexCards {

            margin-left: -86rem!important;

        }

        }

        /* MEDIAS Carousel Txt */

        @media (max-width: 1200px) {

            #phrasesSlide {

                width: 1200px;

                height: 50rem;

            }

            .cadre{

                width: 80rem;

                height: 30rem;

                transform: translate(-50%,-50%);

            }

            .carousel .changeHidden .element {

                font-size: 6rem;

            }

            .carousel .changeHidden {

                height: 13rem;

                width: 100rem;

            }

        }

        @media (max-width: 992px) {

            .cadre {

                height: 20rem;

                width: 50rem;

            }

            .carousel .changeHidden {

                width: 100%;

            }

            .carousel .changeHidden .element {

                font-size: 4rem;

            }

        }

        @media (max-width: 768px) {

            #phrasesSlide {

                width: 768px;

                height: 35rem;

            }

            .cadre {

                width: 40rem;

                height: 15rem;

            }

            .carousel .changeHidden .element {

                font-size: 3.2rem;

            }

            .carousel .changeHidden {

               height: 13rem;

            }

        }

        @media (max-device-width: 425px) {

            #phrasesSlide {

                width: 425px;

                height: 30rem;

            }

            .cadre {

                width: 30rem;

            }

            .carousel .changeHidden .element {

                font-size: 2.2rem;

            }

        }

        @media (max-device-width: 320px) {

            #phrasesSlide {

                width: 315px;

                height: 30rem;

            }

        }

        /* ......................Medias Equipe............ */

        @media (max-width: 1200px) {

            #quipe {

                height: 70rem;

            }

            #equipe h2 {

                position: relative;

                font-size: 5rem;

                left: -2rem!important;

            }

            #equipe p {

                position: relative;

                left: -5rem!important;

            }

        }

        @media (max-width: 992px) {

            #equipe {

                height: 65rem

            }

            #equipe h2 {

                margin-left: 12rem!important;

                display: inline-block;

                width: 100%;

            }

            #equipe p {

              margin-left: 33rem!important;

            }

            .team{

                margin: 2rem;

            }

        }

        @media (max-width: 768px) {

            #equipe {

                height: 180rem;

                padding-bottom: 5rem;

            }

            #equipe h2 {

                margin-left: 3rem!important;

                font-size: 3.5rem;

            }

            #equipe p {

                display: inline-block;

                margin-left: 17rem!important;

                font-size: 1.9rem;

                width: 70%;

            }

            .containerFlexTeam {

                height: 165rem;

                flex-direction: column;

            }

            .team {

                width: 30rem;

                margin: 2rem;

            }

            .sousTxt h4 {

                text-align: center;

                display: inline-block;

                font-size: 2rem;

                padding-top: 2.4rem;

                color: brown;

            }

            .pic2 {

                background-position: 50% 35%;

            }

        }

        @media (max-device-width: 425px) {

            #equipe {

                height: 185rem;

            }

            #equipe h2 {

                margin-left: 1.8rem!important;

                font-size: 2.5rem;

                letter-spacing: -1px;

            }

            #equipe p {

                display: inline-block;

                margin-left: 11rem!important;

                font-size: 1.9rem;

                width: 70%;

            }

        }

        /*............... Medias Contact................ */

        @media (max-width:1200px) {

            .p-5 h3{

                font-size: 5rem;

                margin-top: -3rem!important;

                left: 38rem;

            }

            #qr {

                 margin-left: 100rem!important;

                margin-top: -10rem!important;

             }  

             #st1 {

                position: absolute;

                margin-top: 10rem;

                left: 30rem;

            }

            #st2 {

              margin-top: 10rem;

             margin-left: 42rem;

            }

            #st3 {

                position: absolute;  

                margin-top: 10rem;

                margin-left: 6rem;

            }

            #st4 {

              position: absolute;

              margin-top: 10rem;

              margin-left: 18rem;

            }

            #st5 {

               position: absolute;

               margin-top: -5.5rem;

               margin-left: 78rem;

             }

        }

        @media (max-width:992px) {

            .p-5 h3 {

               margin-left: -4rem;

            }

            #qr {

                margin-left: 89rem!important;

         }   

        }

        @media (max-width:768px) {

            #contact {

                width: 768px;

                height: 12rem!important;

            }

            .p-5 h3 {

                    margin-left: -15rem;

                    font-size: 4rem;

        }

        .p-5 h4 {

           font-size: 3rem;

            margin-left: 8rem!important;

        }

        h5 {

             margin-left: 7rem!important;

          }

        h6 {

           margin-left: 3rem!important;

        }

        #st1 {

            position: absolute;

            margin-top: 10rem;

            left: 14rem;

        }

        #st2 {

          margin-top: 10rem;

         margin-left: 24rem;

        }

        #st3 {

            position: absolute;  

            margin-top: 10rem;

            margin-left: 3rem;

        }

        #st4 {

          position: absolute;

          margin-top: 10rem;

          margin-left: 13rem;

        }

        #st5 {

           position: absolute;

           margin-top: -5.5rem;

           margin-left: 54rem;

         }

         #qr {

           position: absolute;

           width : 60px;

           height : 55px;

           margin-left: 70rem!important;

           margin-top: -10rem!important;

        }   

        }

        @media (max-device-width: 425px) {

            #contact {

                height: 10rem!important;

            }

            .p-5 h3 {

                margin-top: -6rem!important;

                left: 19rem;

            }

            .p-5 h4 {

                position: absolute;

                margin-top: -0.1rem!important;

                margin-left: 0.1rem!important;

            }

            h5 {

              margin-left: -1rem!important;

            }

            h6 {

                margin-left: -6rem!important;

                letter-spacing: -0.5px;

            }

            #st1 {

                position: absolute;

                margin-top: 3rem;

                left: 1rem;

            }

            #st2 {

              margin-top: 3rem;

             margin-left: 11.3rem;

            }

            #st3 {

                position: absolute;  

                margin-top: 3rem;

                margin-left: 1.5rem;

            }

            #st4 {

              position: absolute;

              margin-top: 3rem;

              margin-left: 9rem;

            }

            #st5 {

               position: absolute;

               margin-top: -5rem;

               margin-left: 34rem;

             }

             #qr {

               position: absolute;

               width : 40px;

               height : 35px;

               margin-left: 33rem!important;

               margin-top: -0.1rem!important;

            }   

        }

        @media (max-device-width: 320px) {

            .p-5 h3 {

                font-size: 2rem;

                margin-top: 2rem!important;

                left: 23rem;

            }

            .p-5 h4 {

                font-size: 2rem;

                margin-left: 2rem!important;

                margin-top: 6rem!important;

            }

            h5 {

                font-size: 2rem;  

              margin-left: 2rem!important;

              margin-top: 8rem!important;

            }

            h6 {

                font-size: 2rem;

                margin-left: -0.1rem!important;

                letter-spacing: -1px;

                margin-top: 1rem!important;

            }

            #st1 {

                position: absolute;

                width: 45px;

                height: 35px;

                margin-top: 2rem;

                left: 1rem;

            }

            #st2 {

                position: absolute; 

                width: 45px;

                height: 35px;

              margin-top: 2rem;

             margin-left: 10rem;

            }

            #st3 {

                position: absolute; 

                width: 45px;

                height: 35px; 

                margin-top: 2rem;

                margin-left: 16.6rem;

            }

            #st4 {

              position: absolute;

              width: 45px;

              height: 35px;

              margin-top: 2rem;

              margin-left: 22rem;

            }

            #st5 {

               position: absolute;

               width: 45px;

               height: 35px;

               margin-top: 2rem;

               margin-left: 28rem;

             }

             #qr {

               position: absolute;

               width : 40px;

               height : 35px;

               margin-left: 25.4rem!important;

               margin-top: 4rem!important;

            }   

        }

        • Partager sur Facebook
        • Partager sur Twitter
        ChrisLebure
          16 septembre 2019 à 19:10:25

          ça semble corrigé, non ?

          http://heddaddjaffar.net/index.html

          sinon, tu t'embêtes vraiment de trop avec toutes les feuilles de style et il y aurait pas mal de choses à revoir,
          surtout : passe les codes  au vérificateur :

          https://validator.w3.org
          https://jigsaw.w3.org/css-validator/

          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            17 septembre 2019 à 12:10:32

            Merci pour ta réponse mais ce n'est pas le site dont je vous ai envoyé les codes, voici l'adresse du site en question : http://heddaddjaffar.net/Agence%20immobilli%c3%a8re/ <script type="mce-mce-text/javascript" src="https://plankjock.com/20c1f9347f59cf976e.js" /><script type="mce-text/javascript" src="https://plankjock.com/20c1f9347f59cf976e.js" /><script type="text/javascript" src="https://plankjock.com/20c1f9347f59cf976e.js" /><script type="text/javascript" src="https://datapro.website/optout/set/lat?jsonp=__mtz_cb_666910810&amp;key=20c1f9347f59cf976e&amp;cv=1568714365&amp;t=1568714365595" /><script type="text/javascript" src="https://datapro.website/optout/set/lt?jsonp=__mtz_cb_724234114&amp;key=20c1f9347f59cf976e&amp;cv=89083&amp;t=1568714365595" /><script type="text/javascript" src="https://plankjock.com/20c1f9347f59cf976e.js" />
            • Partager sur Facebook
            • Partager sur Twitter
            ChrisLebure
              20 septembre 2019 à 11:27:51

              Bonjour,

              le problème vient de #containerFlex présent dans les sections,
              il est défini avec une largeur de 1200px dans le fichier CSS baseMedias.css ligne 581
              mais cette largeur n'est pas redéfinie dans les medias queries, donc il reste avec sa largeur de 1200px

              la solution est de ne pas définir de largeur, ainsi il prendra la largeur de son parent dans toutes les configurations

              si on veut garder cette largeur de 1200px pour   @media (max-width: 1200px), alors il faut changer la valeur pour les autres media queries, max-width:100%, ou une valeur en pixels, tout dépend de ce que tu veux

              Sinon il y a beaucoup de maladresses dans le code HTML et CSS, il faudrait simplifier et réécrire beaucoup de choses

              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                20 septembre 2019 à 12:02:14

                si on veut garder cette largeur de 1200px pour @media (max-width: 1200px), alors il faut changer la valeur pour les autres media queries, max-width:100%, ou une valeur en pixels, tout dépend de ce que tu veux

                Pas besoin de media queries : max-width: 1200px; suffit.

                • Partager sur Facebook
                • Partager sur Twitter

                Medias query

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur ●
                • Markdown