18008 sujets

Questions générales et questions de débutants

[Résolu] Media query

bonjour tout le monde
je viens vers vous j'ai un petit problème avec mon média Query
quand je met mon site en écran 1920x1080 tout fonctionne bien
mes dés que je le met en 1366x768 rien ne fonction il me tout a droite

merci pour votre aide
<!DOCTYPE html>
<html lang="en">

<!-- Head -->
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Le salon de toilettage toutou-matou, vous accueille  du mardi au samedi et prend soin de vos petits compagnons. Toiletteur confirmée, nous sommes en mesure de toiletter chaque race de chiens et chats.">
    <!-- End Required meta tags-->
    
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/page-one.css">
    <!-- End CSS -->
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
    <!-- End Fonts -->
    
    <!-- Media Query -->
   <link rel="stylesheet" href="media/grande_resolution.css">
    <!-- End Media Query -->
    
    
    <!--Favicon-->
    <link rel="shorcut icon" href="img/favicon.ico">
    <!-- End Favicon-->
    
    <title>Toutou-Matou Bousbecque | Tél 03 20 23 60 12</title>
</head>
<!-- End Head-->


<!-- Contenu du site -->
<body>
    <!--header -->
    <header class="container-fluid header">
       <div class="container">
          <nav class="menu">
            <a href="#"> Accueil</a>
            <a href="#"> Présentation</a>
            <a href="#"> Toilettage</a>
            <a href="#"> Self</a>
            <a href="#"> Nos tarifs</a>
            <a href="#"> Nos photos</a>
            <a href="#"> Contact</a>
          </nav>
           
       </div>
        
    </header>
    <!-- End header -->
    
    <!-- Banniére -->
    <section class="container-fluid banner">
        <div class="ban">
            <img src="img/dd-banner.png" alt="bannière du site">
        </div>
        <div class="logo">
            <img src="img/logo.png" alt="logo du site">
        </div>
        
        <div class="navbar-menu">
            <img src="img/dd-navbar.png" alt="navbar du site">
        </div>
        
        <div class="dd-golden">
           <img src="img/dd-golden.png" alt="golden du site">
        </div>
        
        <div class="dd-king-charles">
           <img src="img/dd-king-charles.png" alt="cavalier king charles du site">
        </div>
    </section>
    <!-- End Banniére -->
    
    <!-- à propos -->
    <section class="container-fluid about">
    </section>
    <!-- End à propos -->
    
    <!-- Footer -->
    <section class="container-fluid footer">
    </section>
    <!-- End Footer -->
    
</body>
<!-- End Contenu du site -->
</html>


@charset "UTF-8";
/*liens*/
/*font-family: 'Delius', cursive;*/

/*body*/
/*font-family: 'Domine', serif;*/

body, html {
    padding: 0;
    margin: 0;
    
    
}

a, a:hover {
    text-decoration: none;
}

.container-fluid {
    padding: 0;
}

body {
   font-family: 'Domine', serif; 
}

/*-- HEADER --*/
.header {
    position: fixed;
    top: 0px;
    background-color: black;
    height: 59px;
    line-height: 59px;
    z-index: 2;
}

.menu {
    font-family: 'Delius', cursive;
    float: left;
    
    
}

.menu a {
    color: white;
    margin-left: 36px;
}

.menu a:hover {
    color: gray;
}


/*-- BANNIERE --*/

.img{
    width: 100%;
}

.logo {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.navbar-menu {
    position: absolute;
    top: 193px;
    left: 450px;
    text-align: center;
    z-index: 0;   
}

.navbar-menu .img {
    width: 100%;
    
}

dd-golden {
    display: block;
    position: absolute;
    top: 425px;
    left: 91px;
}
.dd-king-charles {
    float: right;
    position: absolute;
    top: 425px;
    right: 91px;
}



media
Administrateur
Il n'y a pas de Media Query dans ce que tu montres, comment peut-on deviner le problème ? Smiley confus
Salut

Dans 
<!-- Media Query -->
   <link rel="stylesheet" href="media/grande_resolution.css">
<!-- End Media Query -->


Tu devrais avoir normalement l'attribut media...
 media="screen"


Et dans ton css, avoir véritablement les @media..
@media screen and (max-width: 640px) {

}


sans ces éléments, ton problème n'est plus un problème mais le résultat correct de tes devs.
Sujet clos
Aller à