1485 sujets

Web Mobile et responsive web design

[Résolu] Page web responsive

Bonjour,

une partie est responsive, entre 1852 et jusqu'à 1000. Plus bas, c'est la cata, notamment avec les blocs rouges et les "player". Mais on ne voit pas de @media dans le css, normal que tout parte en vrille, en as-tu entendu parler ? Et les textes "new game" qui se chevauchent. Quel rôle joue le JavaScript ici ?
Avant de compliquer, il faudrait déjà mettre en place un html et un css, bien propres et responsive. Avancer pièce par pièce et comprendre ce qu'il se passe. Il y a pas mal de choses à revoir.
Je pense que le projet à été abandonné.
Il a déjà çà en mains, que je lui ai pondu sur un autre FOFO.
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap" rel="stylesheet">
 
  <style>
 
    body {
    margin: 0;
    font-family: "Lato", sans-serif;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main {
    border: 10px solid #a4733e;
    }
 
    .btn_new_img{
  width: 30px;
    height: 30px;
    margin-right: 12px;
    }
    .player {
  display: flex;
    flex-direction: column;
    transition: all 0.75s;
    }
    .name {
    position: relative;
    font-size: xx-large;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-weight: 300;
    }
    .score {
    font-size: 80px;
    font-weight: 300;
    color: #f80800;
    margin-top: 5px;
    }
    button:hover {
    color: black;
    font-size: larger;
    }
      .btn_sec{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 330px;
 
    }
 
  .btn_new {
    display: flex;
    align-items: center;
      margin-top: 45px;
      border: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 400;
      font-size: large;
      color: gray;
      background-color: #eee;
      cursor: pointer;
       
 
       
  }
 
 
  .btn_roll {
    display: flex;
      align-items: center;
      margin-top: 340px;
      border: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 400;
      font-size: large;
      color: gray;
      background-color: #eee;
      cursor: pointer;
       
  }
  .mrgTxt{
    margin-top: 2px;
  }
  .btn_hold {
    display: flex;
      align-items: center;
      margin-top: 100px;
      border: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 400;
      font-size: large;
      color: gray;
      background-color: #eee;
      cursor: pointer;
  }
 
  .btn:focus {
      outline: none;
  }
 
  .dice {
      position: absolute;
      top: 250px;
      width: 120px;
      height: 8rem;
      text-align: center;
      margin-left: 485px;
      box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
  }
 
  .player_winner .name {
      font-weight: 700;
      color: #f80800;
  }
 
  .hidden {
      display: none;
  }
 
  .current {
      margin-top: 100px;
      background-color: #f80800;
      width: 200px;
      height: 200px;
      text-align: center;
      transition: all 0.75s;
      padding: 3px;
  }
 
  .current_label {
      text-transform: uppercase;
      font-size: 20px;
      color: black;
  }
 
  .current_score {
      font-size: 32px;
      margin-top: 50px;
      color: white;
  }
 
 
    @media screen and (min-width: 1251px){
 
 
main {
  display: flex;
    width: 1080px;
    height: 660px;
    margin-top: 30px;
    border: 10px solid #a4733e;
}
 
 
.player {
    width: 380px;
    height: 640px;
    margin-top: 30px;
    align-items: center;
}
 
.name {
    margin-bottom: 1rem;
}
}
 
 
@media screen and (max-width: 1251px){
  main {
  display: flex;
    width: 960px;
    height: 660px;
    margin-top: 30px;
    border: 10px solid #a4733e;
}
.dice{
  margin-left: 425px;
}
 
.player {
    width: 380px;
    height: 640px;
    margin-top: 30px;
    align-items: center;
}
 
.name {
    margin-bottom: 1rem;
}
}
 
@media screen and (max-width: 960px){
 
}
 
@media screen and (max-width: 760px){
 
 
 
}
 
@media screen and (max-width: 460px){
  html{
    margin-top: 0;
    padding: 0;
  }
  body{
    margin: 0;
    padding: 0;
    border: none;
  }
  main {
  display: flex;
  flex-direction: row;
    width: 387px;
    height: 500px;
    margin-top: 30px;
    border:none;
}
 
.player {
  border: none;
    width: 75px;
    height: 350px;
    margin-top: 0px;
    margin-left: 18px;
    align-items: center;
    text-align: center;
}
 
.play765{
  margin-left: 200px;
}
 
.name {
    margin-bottom: 1rem;
    font-size: 19px;
}
 
.current {
  margin-top: -75px;
  width: 100px;
}
.btn_sec{
   
  position: absolute;
  z-index: 2;
  flex-direction: row;
  margin-top: 460px;
  width: 385px;
  height: 100px;
}
.btn_new {
  display: flex;
  flex-direction: column;
  margin-top: -73px;
  font-size: 12px;
  letter-spacing: 0px;
}
 
 
.btn_roll{
  display: flex;
  flex-direction: column;
  margin-top: -132px;
  font-size: 16px;
}
 
.btn_hold{
  display: flex;
  flex-direction: column;
  margin-top: -73px;
  margin-right: 3px;
  font-size: 12px;
  margin-left: 10px;
}
.btn_new_img{
  margin-right: 0px;
 
}
 
.dice {
  text-align: center;
  margin-top: -100px;
  margin-left: 150px;
  width: 90px;
}
button:hover {
    font-size: small;
      color: gray;
    }
 
 
}
 
  </style>
 
 
</head>
<body>
  
    <main>
      <section class="player player_0 player_active">
        <h2 class="name" id="name_0">Player 1</h2>
        <p class="score" id="score_0">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_0">0</p>
        </div>
      </section>
 
<img src="./img/dice-1.png" alt="Playing dice" class="dice"/>
 
<div class="btn_sec">
 
   
      <button class="btn btn_new"><img class="btn_new_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png" alt="new-game"/><span class="mrgTxt"> New Game </span></button>
      <button class="btn btn_roll"><img class="btn_new_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png" alt="Roll" /><span class="mrgTxt"> Roll dice</span></button>
      <button class="btn btn_hold"><img class="btn_new_img"  src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png" alt="Hold" /><span class="mrgTxt"> Hold</span></button>
   
</div>
 
 
      <section class="player player_1 play765">
        <h2 class="name" id="name_1">Player 2</h2>
        <p class="score" id="score_1">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_1">0</p>
        </div>
      </section>
 
       
    </main>
    <script src="app.js"></script>
  </body>
  </html>


Il ne reste vraiment pas grand chose à faire pour que ce soit fonctionnel.
Modifié par uniuc (28 May 2023 - 14:11)
Prévenir un modérateur
Répondre au sujet
Aller à