[Résolu] Page web responsive

Question

MontBlanc

25 May 2023 à 14:01

Bonjour à tous,

je voudrais que ma page : https://codepen.io/MontBlanc73/pen/LYgqVZe
soit responsive, j'ai essayé mais sans succès. merci pour votre aide

Bongota

28 May 2023 à 13:00

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.

uniuc

28 May 2023 à 13:52

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)

MontBlanc

30 May 2023 à 16:08

merci, je vais voir comment, je vais finir

Sujet clos