problème avec les media query par jujugogo1 - page 1

Bonjour! j'essaye de faire des media query pour chaque tailles d'écrans pour moi sa marche donc je le met dans les fichier de mon serveur mais quand quelqu'un va sur le site les media query son inexistants merci

css:

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

@font-face {
    font-family: "Gothic";
    src: url(./assets/font/DelaGothicOne-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gothic';
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.header {
    position: absolute;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);
    transition: background-color 0.3s ease;
    top: 100%;
    z-index: 1;
}

.header3440 {
    visibility: hidden;
    position: absolute;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);
    transition: background-color 0.3s ease;
    top: 100%;
    z-index: 1;
}

.logo {
    font-size: 32px;
    color: rgb(0, 0, 0);
    font-weight: 700;
}

.navbar {
    display: flex;
    align-items: center;
}

.navbar a {
    position: relative;
    font-size: 18px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    margin-left: 20px;
}

.navbar a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background: black;
}

.navbar a:hover::before {
    width: 100%;
    transition: 0.3s;
}

.fixed {
    position: fixed;
    top: 0;
    padding: 10px 100px;
    background-color: rgba(255, 255, 255, 0.5);
}

#home {
    background: url('./assets/img/background.png');
    background-size: 100vh;
    background-size: cover;
    height: 100vh;
}

.bienvenue {
    text-align: center;
    position: absolute;
    left: 700px;
    top: 150px;
    font-size: 3.3rem;
    color: rgb(0, 0, 0);
    animation: bienvenueanim 5s ;
}

@keyframes bienvenueanim {
    from {
        color: rgba(0, 0, 0, 0);
        top: 0px;
    }

    to {
        color: black;
        top: 150px;
    }
}

.imgdevfront {
    position: absolute;
    width: 25%;
    left: 1000px;
    top: 400px;
    border: 5px solid gray;
    border-radius: 25px;
    animation: imgdevfrontanim 5s;
}

@keyframes imgdevfrontanim {
    from {
        left: 1400px;
    }

    to {
        left: 1000px;
    }
}

.devfront {
    position: absolute;
    text-align: center;
    left: 500px;
    top: 400px;
    width: 300px;
    animation: devfrontanim 5s;
}

@keyframes devfrontanim {
    from {
        color: rgba(0, 0, 0, 0);
        left: 0px;
    }

    to {
        color: black;
        left: 500px;
    }
}

#portfolio {
    background-color: rgb(233, 233, 233);
    height: 1700px;
    background-size: 100vh;
    background-size: cover;
}

.portfolio {
    position: absolute;
    margin-left: 100px;
    margin-top: 100px;
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.315);
}

.moi {
    position: absolute;
    margin-left: 47%;
    margin-top: -6%;
    animation: moianim 2s infinite alternate;
}

@keyframes moianim {
    from {
        margin-top: -50px;
    }

    to {
        margin-top: -70px;
    }
}

.box1 {
    position: absolute;
    border: 5px solid black;
    width: 43%;
    height: 83%;
    border-radius: 25px;
    margin-left: 100px;
    margin-top: 300px;
    background: gray;
}

.moidef1 {
    position: absolute;
    width: 30%;
    margin-left: 60%;
    margin-top: 5%;
}

.moidef2 {
    position: absolute;
    width: 40%;
    margin-left: 5%;
    margin-top: 60%;
}

.moiimg1 {
    position: absolute;
    width: 52%;
    height: 50%;
    margin-left: 2%;
    margin-top: 2%;
    border: 10px solid black;
    border-radius: 25px;
}

.moiimg2 {
    position: absolute;
    width: 45%;
    height: 45%;
    margin-left: 54%;
    margin-top: 52%;
    border: 10px solid black;
    border-radius: 25px;
}

.box2 {
    position: absolute;
    border: 5px solid black;
    width: 800px;
    height: 800px;
    border-radius: 25px;
    margin-left: 950px;
    margin-top: 300px;
    background: gray;
}

.services {
    position: absolute;
    margin-left: 315px;
    margin-top: -60px;
    animation: moianim 2s infinite alternate;
}

.servdef1 {
    position: absolute;
    font-size: 1.4rem;
    text-align: center;
    margin-top: 50px;
}

.servicesimg {
    position: absolute;
    border: 10px solid black;
    border-radius: 25px;
    margin-top: 310px;
    margin-left: 45px;
    width: 700px;
}

.box3 {
    position: absolute;
    border: 5px solid black;
    width: 800px;
    height: 400px;
    border-radius: 25px;
    margin-left: 540px;
    margin-top: 1200px;
    background: gray;
}

.contact {
    position: absolute;
    margin-left: 315px;
    margin-top: -60px;
    animation: moianim 2s infinite alternate;
}

.contactdef {
    position: absolute;
    text-align: center;
    margin-top: 50px;
}

.contactimg {
    position: absolute;
    margin-left: 290px;
    margin-top: 180px;
    width: 200px;
}

#objectifs {
    background-color: white;
    height: 1000px;
    background-size: 100vh;
    background-size: cover;
}

.objectifs {
    position: absolute;
    margin-left: 100px;
    margin-top: 50px;
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.315);
}

.obj1 {
    position: absolute;
    width: 900px;
    margin-left: 50px;
    margin-top: 300px;
    text-align: center;
}

.obj2 {
    position: absolute;
    width: 900px;
    margin-top: 650px;
    margin-left: 950px;
    text-align: center;
}

.objimg1 {
    position: absolute;
    width: 600px;
    margin-top: 500px;
    margin-left: 100px;
    border: 10px solid gray;
    border-radius: 25px;
}

.objimg2 {
    position: absolute;
    width: 500px;
    margin-left: 1100px;
    margin-top: 200px;
    border: 10px solid gray;
    border-radius: 25px;
}

#contacts {
    background-color: rgb(233, 233, 233);
    height: 500px;
    background-size: 100vh;
    background-size: cover;
}

.contacts {
    position: absolute;
    margin-left: 100px;
    margin-top: 50px;
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.315);
}

.email {
    position: absolute;
    margin-top: 150px;
    margin-left: 100px;
}

.email1 {
    position: absolute;
    margin-top: 150px;
    margin-left: 175px;
    color: rgb(65, 65, 65);
}

@media(max-width: 1500px) {
    .bienvenue {
        left: 28%;
    }

    .devfront {
        left: 150px;
    }

    @keyframes devfrontanim {
        from {
            color: rgba(0, 0, 0, 0);
            left: 100px;
        }

        to {
            color: black;
            left: 150px;
        }
    }

    .imgdevfront {
        left: 600px;
        top: 420px;
    }

    @keyframes imgdevfrontanim {
        from {
            left: 650px;
        }
        to {
            left: 600px;
        }
    }

    .portfolio {
        margin-top: 100px;
        margin-left: 20px;
    }

    .box1 {
        margin-left: 50px;
        height: 500px;
    }

    .moidef1 {
        margin-top: 10px;
        margin-left: 220px;
        width: 200px;
        font-size: 16px;
    }

    .moiimg1 {
        width: 200px;
        height: 200px;
    }

    .moidef2 {
        margin-top: 250px;
        margin-left: 10px;
        width: 200px;
        font-size: 16px;
    }

    .moiimg2 {
        height: 40%;
        width: 47%;
        margin-top: 60%;
        margin-left: 51%;
    }

    .box2 {
        margin-left: 540px;
        height: 500px;
        width: 430px;
    }

    .servdef1 {
        font-size: 16px;
        width: 400px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .servicesimg {
        width: 300px;
        margin-top: 280px;
        margin-left: 65px;
    }

    .services {
        margin-left: 130px;
    }

    .box3 {
        margin-left: 110px;
        margin-top: 1100px;
    }

    .objectifs {
        margin-top: 100px;
        margin-left: 20px;
    }

    .obj1 {
        margin-left: 10px;
        font-size: 20px;
        width: 400px;
    }

    .objimg2 {
        margin-left: 550px;
        width: 400px;
        margin-top: 230px;
    }

    .objimg1 {
        margin-left: 10px;
        width: 450px;
        margin-top: 550px;
    }

    .obj2 {
        font-size: 20px;
        margin-left: 590px;
        width: 300px;
        margin-top: 600px;
    }

    .contact {
        margin-top: 100px;
        margin-left: 320px;
    }

    .email {
        margin-left: 10px;
    }

    .email1 {
        margin-left: 80px;
    }
}

@media(max-width: 1000px) {
    .bienvenue {
        left: 120px;
    }

    .devfront {
        left: 50px;
    }

    @keyframes devfrontanim {
        from {
            color: rgba(0, 0, 0, 0);
            left: 30px;
        }

        to {
            color: black;
            left: 50px;
        }
    }

    .imgdevfront {
        left: 400px;
        width: 35%;
    }

    @keyframes imgdevfrontanim {
        from {
            left: 420px;
        }

        to {
            left: 400px;
        }
    }

    .header {
        width: 100%;
        padding: 10px;
    }
}

@media(max-width: 500px) {
    .bienvenue {
        left: 100px;
        font-size: 2rem;
        width: 200px;
    }

    .devfront {
        left: 10%;
        font-size: 1rem;
        width: 30%;
    }

    @keyframes devfrontanim {
        from {
            color: rgba(0, 0, 0, 0);
            left: 0px;
        }
        to {
            color: black;
            left: 10%;
        }
    }
    .imgdevfront {
        left: 200px;
        top: 420px;
        width: 40%;
    }

    @keyframes imgdevfrontanim {
        from {
            color: rgba(0, 0, 0, 0);
            left: 220px;
        }

        to {
            color: black;
            left: 200px;
        }
    }

    .header {
        width: 100%;
    }

    .navbar a {
        width: 14%;
        font-size: 10px;
    }

    .box1 {
        width: 360px;
        height: 400px;
        margin-left: 4%;
        margin-top: 300px;
    }

    .moi {
        margin-left: 140px;
    }

    .moidef1 {
        width: 120px;
        font-size: 11px;
        margin-top: 30px;
    }

    .moidef2 {
        width: 100px;
        font-size: 11px;
        margin-left: 50px;
        margin-top: 220px;
    }

    .box2 {
        width: 360px;
        height: 500px;
        margin-left: 4%;
        margin-top: 800px;
    }

    .services {
        margin-left: 90px;
    }

    .servicesimg {
        margin-left: 25px;
        margin-top: 270px;
        width: 300px;
    }

    .servdef1 {
        margin-top: 10px;
        font-size: 15px;
        width: 300px;
        margin-left: 20px;
    }

    .box3 {
        width: 360px;
        height: 200px;
        margin-left: 4%;
        margin-top: 1400px;
    }

    .contact {
        margin-left: 100px;
    }

    .contactdef {
        margin-top: 10px;
        font-size: 15px;
    }

    .contactimg {
        margin-top: 80px;
        margin-left: 130px;
        width: 100px;
    }

    .portfolio {
        margin-left: 10%;
        font-size: 40px;
    }

    .objectifs {
        margin-left: 10%;
        font-size: 40px;
    }

    .obj1 {
        margin-top: 250px;
        margin-left: 0px;
        width: 190px;
        font-size: 13px;
    }

    .objimg2 {
        margin-left: 190px;
        width: 190px;
    }

    .obj2 {
        width: 170px;
        font-size: 13px;
        margin-left: 200px;
        margin-top: 400px;
    }

    .objimg1 {
        width: 190px;
        margin-left: 10px;
        margin-top: 400px;
    }

    #objectifs {
        height: 700px;
    }

    .email {
        font-size: 20px;
        margin-left: 0%;
    }

    .email1 {
        font-size: 20px;
        margin-left: 15%;
    }

    .header.fixed {
        padding-left: 10px;
    }

    .logo {
        font-size: 19px;
    }
}

@media(min-width: 3440px) {
    .bienvenue {
        left: 1300px;
    }

    @keyframes imgdevfrontanim {
        from {
            left: 2300px;
        }

        to {
            left: 1800px;
        }
    }

    .imgdevfront {
        left: 1800px;
    }

    .devfront {
        font-size: 50px;
        width: 500px;
        top: 450px;
        left: 800px;
    }

    @keyframes devfrontanim {
        from {
            left: 500px;
        }

        to {
            left: 800px;
        }
    }

    .header {
        visibility: hidden;
    }

    .header3440 {
        visibility: visible;
    }

    .box1 {
        width: 1300px;
        height: 900px;
    }

    .moiimg1 {
        width: 600px;
        height: 400px;
    }
    .moidef1 {
        font-size: 30px;
        width: 500px;
        margin-left: 700px;
        margin-top: 120px;
    }

    .moiimg2 {
        margin-top: 450px;
        margin-left: 650px;
    }

    .moidef2 {
        margin-top: 540px;
        font-size: 30px;
    }

    .box2 {
        margin-left: 1800px;
        width: 1300px;
        height: 900px;
    }

    .servdef1 {
        font-size: 30px;
        margin-left: 100px;
    }

    .servicesimg {
        margin-left: 250px;
        margin-top: 340px;
        width: 800px;
    }
    .services {
        margin-left: 570px;
    }

    .box3 {
        margin-left: 1200px;
        margin-top: 1260px;
    }

    .servdef1 {
        font-size: 30px;
    }

    .objimg2 {
        margin-left: 2000px;
        width: 600px;
        margin-top: 140px;
    }

    .obj1 {
        font-size: 30px;
        margin-left: 500px;
    }

    .obj2 {
        margin-left: 1850px;
        font-size: 30px;
        margin-top: 700px;
    }

    .objimg1 {
        width: 600px;
        margin-left: 650px;
        margin-top: 600px;
    }
}

-
Edité par jujugogo1 28 octobre 2023 à 15:41:38

jujugogo1

28 octobre 2023 à 14:52:02

AbcAbc6

28 octobre 2023 à 17:16:37

Bonjour,

Évitez les titres de sujet avec "problème", si vous postez on se doute que vous avez un problème, l'écrire dans le titre n'apporte aucune information supplémentaire quant au contenu du sujet.

>> mais quand quelqu'un va sur le site les media query son inexistants

Quelle est l'URL du site en question?

Pour ceci c'est NON

* {
    margin: 0;
    padding: 0;
}

Inutile de péter toutes les mages pour tous les éléments surtout pour les éléments qui n'en on pas et que par la suite vous devez les remettre. . Reset au cas par cas ou utilisez un feuille de style par défaut de type normalize

Dans votre CSS je vois que vous avez beaucoup de position absolute. Ce n'est pas comme cela que l'on positionne les éléments, c'est une erreur de débutant de croire cela. Laisser le plus possible les éléments dans le flux courant. Ne modifier pas sa position avec la propriété position sans avoir un référent de positionnement, soit un éléments parent ou ancêtre en position relative par exemple.

Quel est le HTML correspondant à ce CSS?

Pas de width: 100%; sur un élément positionner, utilisez right:0; left:0; Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Quand tu as des marges gauche de 1850px il faut te poser des questions. C'est une bien trop grande valeur.

Documente toi sur le responsive design.

problème avec les media query

problème avec les media query

Supprimer

Modérer

Signaler le message aux modérateurs