Comment transformer un ID avec média queries Résolu/Fermé

Question

Bonsoir à tous,
J'aimerai changer le design de mon ID "contacts" lorsque ma page est inférieur à 700px. Je n'y parviens pas malgré de nombreuses tentatives d'essais … Si quelqu'un à la réponse à mon problème, je suis preneur.
En fait, mon "contacts" doit ressembler à une colonne à gauche quand la largeur est supérieur à 700px, et doit ressembler à une fenêtre qui prend toute la page quand la largeur est inférieur à 700px.

Merci beaucoup d'avance e bonne soirée

@font-face {
  font-family: "gilroy";
  src: url("gilroy-light.otf");
  }

* {
  font-family: "gilroy";
}

::-webkit-scrollbar {
  width: 13px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #1f1f1f;
  border: 31px none #1f1f1f;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:active {
  background: #1f1f1f;
}
::-webkit-scrollbar-track {
  background: #000;
  border: 1px solid #000;
  border-radius: 5px;
}
::-webkit-scrollbar-track:active {
  background: #000;
}
::-webkit-scrollbar-corner {
  background-color: #000;;
}

body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #000;
}

header {
  height: 6%;
  width: 100%;
  color: white;
  background-color: #1f1f1f;
}

#contacts {
  float: left;
  height: 94%;
  width: 15%;
	bottom: 0;
  position: absolute;
  color: white;
  background-color: #1f1f1f;
}

section {
	padding: 8px 40px;
  text-align: center;
  font-size: 1.2vw;
  border-radius: 3px;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
  color: #4aff74;
	background-color: #000;
}

section:hover, :active {
  cursor: pointer;
  background-color: #343434;
}

@media screen and (max-width: 700px) {
  #contacts {visibility: hidden;}
  .logo {
    height: 40px;
    width: 50px;
    border-radius: 20%;
    cursor: pointer;
  }
  .send {
	margin-left : none;
	margin: none;
	margin: 0;
	width: 100%;
  }
}

@media screen and (min-width: 700px) {
  .logo {visibility: hidden;}
  #contacts {
    visibility: visible;
  }
}

span {
  cursor: pointer;
}

/*@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}*/

aside {
  float: right;
  width: 85%;
  height: 80%;
  color: white;
  background-color: #000;
}

.send {
  margin-left: 15.8%;
  height: 7%;
  width: 85%;
  position: absolute;
  bottom: 7%;
  color: white;
  background-color: #1f1f1f;
}

input {
  width: 97%;
  height: 56%;
  border: none;
  margin-left: 1%;
  color: white;
  background-color: #1f1f1f;
  transform: translateY(40%);
}

input:focus {
  outline: 0;
}

footer {
  height: 7%;
  width: 100%;
  position: absolute;
  bottom: 0;
  color: white;
  background-color: #000;
}

#conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#case {
  width: 25%;
  background-color: #000;
  cursor: pointer;
  text-align: center;
  margin: 0;
}

<html>
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">

    <title>Megalodon</title>

    <link rel="shortcut icon" href="logoMegalodon.png"/>
    <link rel="stylesheet" href="index.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>

      <header>
        <span onclick="openFriends()">Mégalodon</span>
      </header>
      
      <article id="contacts">
          <section>friend 1</section>
          <section>friend 2</section>
          <section>friend 3</section>
          <section>friend 4</section>
      </article>

      <div id="contacts" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeFriends()">×</a>
        <div class="overlay-friend">
          <a href="#">friend 1</a>
          <a href="#">friend 2</a>
          <a href="#">friend 3</a>
          <a href="#">firend 4</a>
        </div>
      </div>

      <aside>...</aside>

      <div class="send">
        <input onkeypress="pressEnter(event);" id="message" type="text" name="message" placeholder="Send a message to ..."/>
      </div>
      
      <footer id="conteneur">
        <div id="case" class="fas fa-credit-card"> Contacts</div>
        <div id="case" class="fas fa fa-cube"> Caves</div>
        <div id="case" class="fas fa fa-dollar"> Market</div>
        <div id="case" class="far fa-user"> pseudo</div>
      </footer>

    <script src="index.js"></script>
  </body>
</html>

function openFriends(){
  document.getElementById("contacts").style.visibility = "visible";
}
function closeFriends(){
  document.getElementById("contacts").style.visibility = "hidden";
}

Mégalodon

friend 1

friend 2

friend 3

friend 4

×

friend 1 friend 2 friend 3 firend 4

function openFriends(){ document.getElementById("contacts").style.visibility = "visible"; } function closeFriends(){ document.getElementById("contacts").style.visibility = "hidden"; }

Hokuro · Answer

Salut,
en regardant la doc de la propriété vous pouvez voir que visibility ne fonctionne pas comme vous pensez:
Un élément en visibility hidden prendra toujours la même place bien qu'il ne soit plus visible.
Passez plutôt à display si vous voulez supprimer l'emplacement que prends un élément.

https://www.w3schools.com/CSSref/pr_class_visibility.asp

Remarquez aussi que quelque soit la méthode ce n'est pas une pratique recommandé(qu'un élément soit masqué bien que présent dans la pafe) car celui ci bien que présent(et référencé) dans la page ne sera pas disponible.
Cela va à l'encontre des règles d'accessibilité du web et dans le cas où l'élément n'est pas disponible rallonge le code inutilement et fait lire au navigateur un élément qui n'est pas utilisé(donc rallonge potentiellement le temps de chargement et de lecture par le navigateur de la page inutilement).

Comment transformer un ID avec média queries

1 réponse

Discussions similaires