Partage
  • Partager sur Facebook
  • Partager sur Twitter

oeil de sauron pixel art Boostrap

probleme responsive mobile boostrap

Delpiero92
    13 février 2019 à 16:27:30

    Bonjour,

    Je suis obtenir de l'aide pour mettre mon projet en responsive , j'ai essayé pas mal de méthode mais je n'arrive pas à le mettre en responsive mobile.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
    <div class="container">
        <h1>Sauron</h1>
        <div class="row colonne1">
            <div class="col-sm-1 noir ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-9 noir">
                <div class="carre_noir">
                </div>
            </div>
        </div>
        <div class="row" >
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1  offset-sm-3">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-3">
                <div class="carre_noir">
                </div>
            </div>
        </div> 
        <div class="row">
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-2">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
            </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-2">
                <div class="carre_noir ">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                    <div class="carre_noir">
                    </div>
                </div>
            <div class="col-sm-1">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_jaune">
                </div>
                </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                    <div class="carre_noir">
                    </div>
            </div>
            <div class="col-sm-1 offset-sm-1">
                <div class="carre_orange">
                </div>
                </div>
            <div class="col-sm-1 ">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1  ">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_orange  ">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-1">
                <div class="carre_noir ">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir ">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                    <div class="carre_noir">
                    </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
                </div>
            <div class="col-sm-1 offset-sm-1 ">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_jaune">
                </div>
            </div>
            <div class="col-sm-1  ">
                <div class="carre_orange">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir ">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir ">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1 offset-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 offset-sm-3">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1  ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1 offset-sm-2">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1  ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1 offset-sm-3">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            </div>
        <div class="row">
            <div class="col-sm-1 offset-sm-4">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-1 offset-sm-4">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1 ">
                <div class="carre_noir">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="carre_noir">
                </div>
            </div>
        </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
    .carre_noir{
    width:50px;
    height:50px;
    background-color: black;
    margin:1px;
    
}

.carre_orange{
    width:50px;
    height:50px;
    background-color: orange;
    margin:1px;
   
}

.carre_jaune{
    width:50px;
    height:50px;
    background-color: yellow;
    margin:1px;
    
}

@media (max-width: 768px){

    .carre_noir, .carre_jaune, .carre_orange{
  
      width: 20px;
      height: 20px;
  
    }
  
  }




    Pouvez-vous m'aider ?

    merci.

    • Partager sur Facebook
    • Partager sur Twitter

    Je ne suis pas un crack en informatique, loin de là, mais il n'y a pas que les mécaniciens

    qui sachent conduire une voiture.

    Benzouye
    • HTML / CSS
      13 février 2019 à 17:01:03

      Bonjour,

      Je ne sais pas combien vous êtes dans votre promo, mais j'espère que chacun ne va pas venir poster sa demande d'aide pour ce sujet ...

      Un peu de travail et de recherche vous fera le plus grand bien, quitte à mettre vos résultats en commun ... non ?

      -
      Edité par Benzouye 15 février 2019 à 11:06:21

      • Partager sur Facebook
      • Partager sur Twitter
      Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
      Delpiero92

      oeil de sauron pixel art Boostrap

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown