[RESOLU] Dans une configuration GRID, j'ai une image qui ne se redimensionne pas , voyez vous l'erreur ?

Avatar du membre
Petit nouveau ! | 7 Messages

19 juil. 2020, 14:08

Bonjour, je cherche un moyen de faire passer une grille en dessous des autres sur les portables, et je rencontre deux problèmes.
1) l'une des grille a son image qui reste figée en taille alors que dans les autres grilles tout marche bien.
2) ma syntaxe pour gérer les taille des deux éléments centraux me parait pas très bonne ?
Pouvez vous me dire si vous voyez ou j'ai fait une faute ? je n'ai pas réussi à gérer cette double erreur.
Merci d'avance
voici le html qui simule la page réelle.
<!DOCTYPE html>  
<html lang="fr">     
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>teste</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body {background-color:#E5E7E6;font-family:"Times New Roman", Times, serif;color:#000000; font-size:16px;margin:0;border:0;text-align: center;}

.container {
  display: grid;
  grid-template-rows: auto auto 1fr; 
  grid-template-columns: 30% 1fr;
  grid-template-areas: "header header"
                       "footer aside"
                       "nav    nav";
 min-height: 100vh;
}
.header {grid-area: header;width:100%;height:auto;}
.nav {grid-area: nav;}
.aside {grid-area: aside;}
.footer {grid-area: footer;}

div.moncentre {height:auto;width:98%;max-width:98%;margin:0;text-align:center;}
div.DivMenu  { width:100%; left:0; top:0; background-color:#1a214d;  position : fixed;  }
img.bande { width:100%;max-width:1300px;margin:0; }
img.bande2 { width:100%;max-width:2400px;margin:0; }

@media (max-width: 750px) 
{
  body {width:auto;margin : 0;}
  form {width:88%}
  img, blockquote, pre, textarea, input, iframe, table, form, embed, video {max-width:98%;}
  table, textarea {overflow-wrap:break-word;hyphens:auto;}
  pre, samp {overflow-wrap: anywhere;}

.container 
  {
    display: grid;
    grid-template-rows: auto auto 1fr; 
    grid-template-columns: 30% 1fr;
    grid-template-areas: "header header"
                         "nav aside"
                         "footer footer";
  }
}

</style>
</head>
<body style="background-color:#E5E7E6;">
<div class="container">
   <div class="header">    
    <div class="moncentre" id="DivMenu">
       <img class="bande2" src="http://les-astuces-du-web.com/codepen/olivmenu.jpg" alt="test olivier" />
    </div>
   </div>   
   <div class="nav"></div>
   <div class="aside">
     <div id="DivCenter"  class="moncentre" >
       <img class="bande" src="http://les-astuces-du-web.com/codepen/olivaside.jpg" alt="test olivier" />
     </div>
   </div>
   <div class="footer">
     <div id="DivSpecGauche"  class="moncentre" >
        <img class="bande" src="http://les-astuces-du-web.com/codepen/olivnav.jpg" alt="test olivier" />
     </div>
   </div>   
</div>
</body>
</html>
Vous pouvez changer sur mon codepen pour contrôler votre modification et voir ce qui se passe.
https://codepen.io/jplyne/pen/qBbQoxE
Merci encore !
TROUVE !! c'était le 30% au lieu de auto désolé pour le dérangement :oops: