Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de background sur tablette

Sujet résolu
laure79
20 mars 2019 à 16:47:59

Bonjour,

J'ai terminé la création d'une page html/css avec Bootstrap en version pc. Cela fonctionne.

Cependant, j'essaie d'adapter avec les media queries pour tablette (je ferai les smartphones plus tard) et je rencontre deux problèmes que je ne comprends pas.

D'après ce que j'ai compris des cours, si je spécifie un type d'écran avec les medias queries, je ne cible que ce type d'écran hors dans mon cas, si j'attribue un background rouge pour les tablettes et un background noir pour les pc, tout est rouge...

De plus, j'ai mis un background uniquement pour le grand écran afin d'avoir des marges latérales. Sinon, en principe, mon background ne devrait pas apparaitre et l'image de fond serait en background. Hors, en mode tablette, j'ai mon background noir sous mon menu de navigation et avant mon header. Je ne parviens pas à supprimer ce noir disgracieux qui n'a rien à faire là...

Ai je mal compris quelque chose ? Mon code vous parait il inapproprié ? Merci pour vos idées et commentaires.

Bonne soirée.

Code html :

<!DOCTYPE html>
	<html lang="fr">
		<head>
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1"/>
			<link href="css/bootstrap.min.css" rel="stylesheet">
            <link rel="stylesheet" href="css/styletest.css"/>
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
            <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
            <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
            <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
			<title> VoyagesdeRêve : Bienvenue sur notre nouveau site ! </title>
            
		</head>

<!-- XS : smartphones /  SM : tablettes / MD : IPAD / LG : TV-->

		<body>
            
            
<!-- MENU NAVIGATION -->
            
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <div class="navbar">
                        <button type="button" class="navbar-toggle" data-togle="collapse" data-target="#navbar-collapse-main">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                            
                        <a class="navbar-brand" href="#" id="menu"> Voyages de Rêves </a>
                        <a class="right" href="#"> <img src="img/anglais_small.png" alt="Logo"/> </a>
                    </div>
                    
                    <div class="collapse navbar-collapse" id="navbar-collapse-main"> <!-- NE PAS TOUCHER -->
                        <ul class="nav navbar-nav navbar-left">  <!-- NE PAS TOUCHER -->
                            <li class="headnav"><a class="active" href="#"> Accueil </a></li>
                            <li class="headnav"> <a href="#"> Destinations</a></li>
                            <li class="headnav"> <a href="#"> Expériences</a></li>
                            <li class="headnav"> <a href="#"> Paroles de voyageurs</a></li>
                            <li class="headnav"> <a href="#"> Qui sommes nous ? </a></li>
                            <li class="headnav"> <a href="#"> Destinations sur-mesure du moment</a></li>
                            <li class="headnav"> <a href="#"> Contact</a></li>
                            <li class="headnav"> <a href="#"> Le Blog</a></li>
                        </ul>
                            
                    </div>
                </div>    
            </nav>
            
<!-- bloc -->
            
            <div class="bloc_page">
            
<!-- MENU HEADER -->
            
            <header>
                <div id="home">
                    <div class="landing-text"> <!-- NE PAS TOUCHER !-->
                        <a href="#"><img src="img/logovoyagesderevespetit.jpg" alt="logo" id="logo" class="center-block"/> </a><br/>
                        <p class="accroche"> Et vos rêves se réalisent... </p> <br/>
                        <img src="img/icon.png" alt="Icone flèche pleine sur fond transparent dans un cercle" class="center-block" id="fleche"/> <br/>
                        <h1> Vivre l'Essentiel Oman : Au pays des milles et une nuits <br/> </h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/></p>
                        <a href="#" class="btn btn-default btn-xs" id="contacte"> Etre contacté </a> <br/>
                    </div>
                </div>   
            </header>
            
            
            
<!-- MENU SECTION 1 : Best of -->
            
               <section class="section1_bestof">        
                <div class="padding">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-7">
                                <img src="img/telephonesx3reduit.png" alt="Téléphones"> <br/>
                                                       
                            </div>
                            
                            <div class="col-md-5 text-center">
                                <h2 class="h2_mob">Best of</h2>
                                <p class="perso"> Nos dernières idées de voyages sur-mesure 100% personnalisables </p>
                                 <a href="#" class="btn btn-default btn-lg" id="interesse"> Ca m'intéresse </a>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-xs-12">
                                <img src="img/controls.png" alt="Boutons de contrôle" class="center-block"/>    
                            </div>
                        </div>
                    </div>
                   </div>           
           </section>  
            
            

<!-- MENU SECTION 2 : Voyager avec nous -->
            
     <section class="section2-voyager">
            <div class="padding" id="test">
                <div class="container">
                   <div class="row">
                    <div class="col-xs-12">
                       <h2 class="titre"> NOS ENGAGEMENTS</h2>
                    </div>
                   </div>
                    
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <h3 class="topleft"> PERFECTION A SON SUMMUM<br/> </h3>
                            <p class="voyagetopleft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> </p>
                        </div>
                        
                        <div class="col-md-6">
                            <h3 class="topright"> VERS UN TOURISME RESPECTUEUX <br/> </h3>
                            <p class="voyagetopright"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/> </p>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <h3 class="bottomleft"> UN SEUL CONSEILLER POUR LE VOYAGE<br/> </h3>
                            <p class="voyagebottomleft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> </p>
                            <a href="#" class="btn btn-default btn-lg" id="valeurs"> Nos valeurs </a>
                        </div>
                        
                        <div class="col-md-6">
                            <h3 class="bottomright"> NOUS PENSONS A NOTRE PLANETE <br/> </h3>
                            <p class="voyagebottomright"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  <br/> </p>
                            <a href="#" class="btn btn-default btn-lg" id="connaitre"> Nous connaître </a>
                        </div>
                    </div>
                </div>
            </div>     
    </section>
        
        
            
<!-- MENU SECTION 3 : Voyageons -->
        
        <section class="section3-voyageons">
            <div class="padding">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <h2 class="centered"> Voyageons N°7 Printemps-Eté <br/> </h2>
                            <p class="p_voyageons"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/> </p>
                            <a href="#" class="btn btn-default btn-lg" id="magazine"> Commandez  </a>
                        </div>     
                    </div>
                </div>
            </div>
        </section>
        
            
            
            
<!-- MENU SECTION 4 : 123partez -->
            <section class="section4-123partez">
                <div class="padding">
                    <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <img src="img/chrono.png" alt="Chronomètre" class="center_chrono"> <br/>
                            <h4 class="rubrique1"> ECOUTE <br/> </h4>
                            <p class="p1_section4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        </div>
                        
                         <div class="col-md-3 col-sm-6 col-xs-12">
                            <img src="img/montre.png" alt="Montre" class="center_montre"> <br/>
                            <h4 class="rubrique2"> DISPONIBILITE <br/> </h4>
                            <p class="p2_section4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        </div>
                        
                         <div class="col-md-3 col-sm-6 col-xs-12">
                            <img src="img/stats.png" alt="Statistiques" class="center_stats"> <br/>
                            <h4 class="rubrique3"> PERSONNEL <br/> </h4>
                            <p class="p3_section4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        </div>
                        
                         <div class="col-md-3 col-sm-6 col-xs-12">
                            <img src="img/menu.png" alt="Menu" class="center_menu"> <br/>
                            <h4 class="rubrique4"> SERVICES <br/> </h4>
                            <p class="p4_section4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. </p>
                        </div>
                        
                    </div>
                    </div>
                </div>
            </section>
            
<!-- MENU FOOTER -->
        <div class="footer">
            <div class="container-fluid text-center">
                <div class="row">
                    <div class="col-xs-12">
                        <img src="img/twitter.png" alt="Icone Twitter" class="twitter"/> 
                        <img src="img/facebook.png" alt="Icone Facebook" class="facebook"/>
                        <img src="img/google+.png" alt="Icone Google Plus" class="google+"/>
                    </div>
                </div>    
                
                <div class="row" id="footer2">
                    <div class="col-xs-6">
                        <p class="copyright_left"> Copyright The Range </p>
                    </div>
                    
                    <div class="col-xs-6">
                         <p class="copyright_right"> Lorem ipsum dolor sit amet </p>
                    </div>
                </div>
            </div>
        </div>      
        
                </div> <!--bloc page fin-->
        </body>

    </html>

Code CSS :

/*GLOBAL PAGE*/

html, body
{
    height: 100%;
    width: 100%;
    background: #000000;
}

.bloc_page
{
    height: auto;
    width: auto;
    background: url(../img/essayonsv11.png) no-repeat center; 
    position: relative;
    min-height: 3620px;
    min-width: 1100px; 
}

/* MENU DE NAVIGATION */
#menu
{
    color: #58c4c4;
    font-family : "OpenSans-Regular";
    size: 24px;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;    
}

.right
{
    position: absolute;
    right: 10px;
    top: 10px;
}


.headnav
{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: bold;
}

navbar-collapse-main
{
    margin-bottom: 30px;
}

.navbar-brand 
{
    min-height: 55px;
    padding: 15px 15px 15px; 
}

.navbar
{
    margin-bottom: 0px;    
}

.navbar-inverse .navbar-nav li a 
{
    color: #cfa9fc;
}


.navbar-inverse .navbar-nav li a:hover
{
    color: #58c4c4;
    margin-left: 15px;
    text-decoration: underline;
}


.navbar-inverse .navbar-nav li a.active
{
    color: #ffffff;
}

/* HEADER */

#home
{
    padding-top: 130px;
    margin: auto;
    width: 1000px;
}

.logo
{
    min-height: 55px;
    padding: 0 15px 5px;
}

.accroche
{
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    color: #713a84;
    font-weight: bold;
    text-align: center;
    margin-bottom: 450px;  
}


h1
{
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    color: #b6a8be;
    font-weight: normal;
    margin-top: 5px;
    text-align: center;   
    
}


#fleche
{
    margin-top: -20px;
}

.landing-text p
{
    color: #875b98;
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-style: bold;
    line-height: 1.8;
    font-size: 20px;
}

.btn-default
{
    height: 35px;
    width: 200px;
    position: absolute; 
    background-color: #58c4c4;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    color: #ffffff;
    font-size: 18px;
}

/* SECTION 1 : BEST OF */

#contacte
{
    margin-left: 425px;
    margin-top: 30px;
    width: 150px;
}



h2
{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 30px;
    color: #dcd7df;
}

h3
{
    font-family: 'Lato', sans-serif;
    font-size: 20px; 
    color: #80578f;
    font-weight: bold;
    margin-bottom: 5px;
    font-variant: small-caps;
    
}

.voyage
{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #7a8387;
    text-align: justify; 
    line-height: 1.9;
}

h4
{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #9265a1;
    font-weight: bold;
    text-align: center;
}

.p_123
{
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #828b8e;
    text-align:center;
}

.padding 
{
    margin-top: 300px;
}

.h2_mob
{
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    color: #dcd7df;  
}

.perso
{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    color: #7a4e8b;
    padding-right: 15px;
    text-align: left;
    margin-right: 140px;
}

.titre
{
    color:  #58c4c4;
    text-align: center;
    margin-top: -200px;
    font-weight: bold; 
    
}

.topleft
{
    margin-top: -110px;
    margin-left: 50px;
}

.voyagetopleft
{
    margin-left: 50px;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #7a8387;
    text-align: justify; 
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px;
}

.topright
{
    margin-top: -110px;
    margin-right: 50px;
}

.voyagetopright
{
    margin-right: 50px;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #7a8387;
    text-align: justify; 
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px; 
}

.bottomleft
{
    margin-top: 40px;
    margin-left: 50px;   
}

.voyagebottomleft
{
    margin-left: 50px;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #7a8387;
    text-align: justify; 
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px;
}

#valeurs
{
    margin-left: 220px;
    margin-top: 30px;
    width: 150px;
}

.bottomright
{
    margin-top: 40px;
    margin-right: 50px;   
}

.voyagebottomright
{
    margin-right: 50px;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #7a8387;
    text-align: justify; 
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px;
}

#connaitre
{
    margin-left: 180px;
    margin-top: 30px;
    width: 150px;
}

.section3-voyageons
{
    margin-top: -120px;
}

.centered
{
    text-align: center;
}

.p_voyageons
{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    color: #a87ab8;
    text-align: center;
    margin-right: 180px;
    margin-left: 180px;    
}

#magazine
{
    margin-left: 500px;
    margin-top: 30px;
    width: 150px;
}

#interesse
{
    margin-left: -100px;
    margin-top: 30px;
    width: 150px;
    
}

.section4-123partez
{
    margin-top: -100px;
}

.rubrique1
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #9265a1;
    text-align: center;
    margin-left: 35px;  
}

.center_chrono
{
    width: 36px;
    height: 39px;
    margin-left: 130px;
}

.p1_section4
{
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #828b8e;
    text-align:center;
    margin-left: 35px; 
    padding-left: 10px;
    padding-right: 10px; 
}

.center_montre
{
    width: 39px;
    height: 39px;
    margin-left: 110px;
}

.rubrique2
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #9265a1;
    text-align: center;
    margin-left: 15px;
}

.p2_section4
{
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #828b8e;
    text-align:center;
    margin-left: 10px; 
    padding-left: 10px;
    padding-right: 10px; 
}


.center_stats
{
    width: 38px;
    height: 38px;
    margin-left: 120px;
}

.rubrique3
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #9265a1;
    text-align: center;
    margin-left: 15px;
}

.p3_section4
{
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #828b8e;
    text-align:center;
    margin-left: 10px; 
    padding-left: 10px;
    padding-right: 10px; 
}

.center_menu
{
    width: 38px;
    height: 38px;
    margin-left: 90px;
}

.rubrique4
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #9265a1;
    text-align: center;
    margin-right: 45px;
}


.p4_section4
{
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #828b8e;
    text-align:center;
    margin-left: 5px; 
    margin-right: 35px; 
    padding-right: 10px;
}

.footer
{
    margin-top: 170px;
}

.twitter
{
    margin-right: 30px;
}

.facebook
{
    margin-right: 30px;
}

#footer2
{
    margin-top: 110px;
}

.copyright_left
{
    font-family: 'Lato', sans-serif;
    margin-left: 150px;  
    margin-right: 20px;
    font-size: 15px; 
    font-weight: normal;
    margin-top: 50px;
    color: #83969f;
}

.copyright_right
{
    font-family: 'Lato', sans-serif;
    margin-right: 190px;
    font-size: 15px; 
    font-weight: normal;
    margin-top: 50px;
    color: #83969f;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* ATTENTION */

/* TABLETTES*/

@media (min-width: 768px) 

{ 
    
li
    {
        margin-right: 5px;
    }

    
body 
    {
        background-color: red;
    }
    /*
#home
    {
        padding-top: 0px;
        margin-top: 0px;
    }
    */
/*.navbar
    {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }*/

}




  • Partager sur Facebook
  • Partager sur Twitter
Mewen_bzh
  • HTML / CSS
20 mars 2019 à 17:30:04

Bonjour,

Lorsque tu écris ta media-query sous la forme  :

@media (min-width: 768px) {     

//ton css...

}

Tu cibles tous les écrans avec une largeur minimale de 768px, en d'autres termes ce code CSS s'appliquera à tout ce qui est plus large que 768px. 

Un écran de 1920px de large (par exemple) est plus large que 768px dont la media-query s'y applique. ;)

Et comme le fond de couleur rouge (ligne 542) est déclaré plus bas dans le fichier que le fond noir (ligne 7), c'est le fond rouge qui s'applique car il est plus prioritaire.

-
Edité par Mewen_bzh 20 mars 2019 à 17:34:43

  • Partager sur Facebook
  • Partager sur Twitter
Je ne réponds pas aux messages privés.
Zoki_Marciano
  • HTML / CSS
20 mars 2019 à 20:21:54

Je trouve que le CSS est trop chargé et bootstrap insuffisamment utilisé (ce qui éviterait aussi de surcharger le CSS ).
  • Partager sur Facebook
  • Partager sur Twitter
Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
Mewen_bzh
  • HTML / CSS
20 mars 2019 à 20:59:20

Il y a également quelques petites erreurs ici et là.

Par exemple, ligne 128, tu écris font-style:bold au lieu de font-weight: bold. 😉

  • Partager sur Facebook
  • Partager sur Twitter
Je ne réponds pas aux messages privés.
laure79
21 mars 2019 à 6:09:17

Merci pour vos commentaires. Toutefois, je m'y perds avec les valeurs à indiquer pour les media queries. Je lis de tout et je ne sais plus quelles sont les bons breakings  points... Je souhaiterai en avoir un pour cibler les smartphones et un pour les tablettes. Pourriez vous me conseiller svp ? De plus, je ne comprends tout de même pas comment faire disparaitre (et à quoi est dûe) mon espace noir ou rouge sous le menu de navigation et au dessus de mon background. J'ai modifié les marges... rien ne le fait disparaitre. :( Merci !
  • Partager sur Facebook
  • Partager sur Twitter
Mewen_bzh
  • HTML / CSS
21 mars 2019 à 8:56:02

Pour les medias-queries tu lis de tout car tous les projets sont différents et ont des cas particuliers à gérer malgré quelques similarités. C'est pour cela qu'il n'est pas important de retenir des valeurs bien précises mais plutôt de comprendre comment cela fonctionne pour être capable de s'adapter.

Dans ton cas, tu veux des styles particuliers pour les tablettes alors tu as plusieurs solutions.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles pour cette Media Queries */
}

Tu peux définir une largeur min et une largeur max. Ici par exemple, tu cibles tous les écrans entre 768 et 1024px. Soit, en gros, tout ce qui est plus large qu'un smartphone classique mais moins large qu'un écran d'ordinateur.

@media only screen (max-device-width : 1024px) {
/* Styles pour cette Media Queries */
}

Deuxième solution, cibler uniquement tous les écrans en dessous de 1024px de large. En faisant cela tu cibles en gros les terminaux mobiles, c'est à dire les tablettes mais aussi les smartphones.

@media (min-width : 768px) {
/* Styles pour cette Media Queries */
}

@media (min-width : 992px) {
/* Styles pour cette Media Queries */
}

@media (min-width : 1200px) {
/* Styles pour cette Media Queries */
}

Tu peux également avoir une structure de ce type. Ici tu cibles dans la première partie tout ce qui est plus large que 768px (c'est à dire les tablettes), puis ce qui est plus grand que 992px dans un deuxième temps (les petits écrans d'ordinateur) puis ce qui est plus large que 1220px (les grands écrans). 

Après cela tu as encore une infinité de possibilités. Notamment :

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles pour cette Media Queries */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles pour cette Media Queries */
}

En faisant cela tu peux cibler uniquement les tablettes en format paysage ou les tablettes en format portrait.

Comme je te le disais, il faut simplement retenir le principe et ensuite s'adapter aux contraintes du projet. C'est d'autant plus vrai que les constructeurs de smartphones, tablettes et d'écran introduisent en permanence des variantes de taille et de résolution d'écran.

Pour ton second souci, tu vas devoir nous donner plus de renseignements. Un screenshot clair pour nous montrer précisément ce qui t e pose un problème par exemple. 

-
Edité par Mewen_bzh 21 mars 2019 à 9:08:09

  • Partager sur Facebook
  • Partager sur Twitter
Je ne réponds pas aux messages privés.
laure79
21 mars 2019 à 11:19:29

Bonjour Mewen,

Merci pour ton message et tes explications.

Entre temps, j'ai essayé de cibler les tablettes avec un @media screen (min-device-width : 768px) and (max-device-width : 991px) qui semble mieux fonctionner chez moi (pas de fond rouge en haut) et ne déforme pas ma version pc comme le fait cela : @media (min-width : 768px).

Cependant, je n'arrive pas à supprimer l'espace noir en dessous de ma barre gris foncée de navigation qui en plus passe sur mon logo... 


Voyez vous à quoi cela pourrait être du ? Merci.

Egalement, comment puis je m'y prendre pour que le contenant ne dépasse pas sur les côtés ? Merci.

Bonne journée.

-
Edité par laure79 21 mars 2019 à 12:49:29

  • Partager sur Facebook
  • Partager sur Twitter