1307 sujets

Web Mobile et responsive web design

Bonjour à tous,

je débute sur bootstrap, j'ai une page qui fonctionne sous chrome, logo du titre en haut à gauche et le titre centré à sa droite, mais quand je passe sous firefox ou opéra, le logo passe en haut et le titre en dessous et mes images ne se place plus comme elle le devrait sur la grille, et je n'arrive pas a comprendre pourquoi.


<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La maison de l'architecte</title>
    <meta name="description" content="Le site de la maison de l'architecture">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css"> 

      /* Styles de base */
      body {
        font-family: 'Bitter', serif;
        background-color: #eef;
        color: #259;
      }
      nav img {
        width: 100%;
      }



       /* *************************** */
      /* Styles pour les smartphones */
     /* *************************** */

      @media (max-width: 768px) {
      #left, #side1, #side2 {
        padding: 10px 10px 0 10px;
      }
       /* Personal Stylised Title XS*/
      .h1-xs{
        text-align: center;
        font-size: 1.5em;  
      }
       /* btn Social */ 
      .glyphicon {
    font-size:80%;
    background-size: 80%;
      }
      .btn-primary{
          border-radius: 100%;
      }
       .padf{
        padding-top: 5px;
       }
      .text-center {
          text-align: center;
       }
      } 

       /* ************************* */
      /* Styles pour les tablettes */
     /* ************************* */

      @media (min-width: 768px) {
        #left{
          padding: 0;
        } 
        #side1 {
          padding: 10px 5px 0 0;
        } 
        #side2 {
          padding: 10px 0 0 5px;
        }
        /* Personal Stylised Title SM */
       .jumbotron{
       font-weight : bold;
       text-align:center;
       text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
        }


   
        /* btn Social */        
        .btn-primary{
          height: 50px;
          width: 50px;
          border-radius: 100%;
        }               
      }
       /* *************************************** */
      /* Styles pour les écrans moyens et grands */
     /* *************************************** */

      @media (min-width: 992px) {
        #side1, #side2 {
          padding: 0 0 10px 10px;
        } 
        /* Personal Stylised Title MD*/
        .jumbotron{
       border-top: 0.3em solid #afacad;
       font-weight : bold;
       text-align:center;
        }

        /* btn Social */        
        .btn-primary{
          height: 50px;
          width: 50px;
          border-radius: 100%;
        }


      }
 
    </style>

  </head>

  <body>
<div class="container">

    <header class="page-header">
    <div class="row">
     <div class=" col-lg-12 jumbotron">
      <div class="hidden-xs col-sm-1 col-md-1 col-lg-1">
      <a href="#"><img src="assets/img/logo.png" alt="logo"></a>
      </div>
      <div class="col-xs-12 col-sm-offset-2 col-sm-7 col-md-offset-1 col-md-9 col-lg-offset-1 col-lg-9">
      <h1 class="h1-xs">le titre se place ici</h1>     
     </div>   
     </div>
    </div>
    </header>

    <nav>
    <div class="row">
      <div id="left" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
        <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
      </div>
      <div id="side1" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
      </div>
      <div id="side2" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
      </div>
    </div>
    </nav>

    <footer class="text-center padf">

      <a class="btn btn-primary btn-responsive" href="#"><i class=" fa fa-twitter fa-2x glyphicon"></i></a>
      <a class="btn btn-primary btn-responsive" href="#"><i class="fa fa-facebook fa-2x glyphicon"></i></a>
      <a class="btn btn-primary btn-responsive" href="#"><i class="fa fa-google-plus fa-2x glyphicon"></i></a>
      <a class="btn btn-primary btn-responsive" href="#"><i class="fa fa-flickr fa-2x glyphicon"></i></a>
      <a class="btn btn-primary btn-responsive" href="#"><i class="fa fa-spotify fa-2x glyphicon"></i></a>
    </footer>




     </div>
  </body>

</html>


si quelqu'un pouvait m'expliquer ou ca cloche, merci d'avance.
il me semble que tout est ok !!
le logo est gérer par le code suivant pour les mediaqueries
.hidden-xs pour horizontal max-width < 767 px ..=>display: none!important;
coll-sm-1 pour win-width > 768 -A .....................=> float : left
.Col-md-1 pour width > 992 px ........................... => float:left
col-lg-1 pour min-width > 1200 px ...................... => float : left
sous windows 10 ( 64 bit) avec opera 43.0.2442.1144 (PGO , Chrome 56.0.2924.'87-->133' , firefox 52.0.2 ( 32 bit) .

j'avais édité plus d information mais la logique du forum ne permet de reéditer en mode pendant une longue durée d'édition ...donc mes modifications n'ont pas été enregistrer !! un non sens et pas d alerte sur ce fait !!
Modifié par 75lionel (05 Apr 2017 - 23:47)
Meilleure solution
reagrdez la valeur en % des differents col-X-Y ou X vaut selon les cas xs sm md lg et Y 12 8 6 4 . Vous allez voir avec le mode debug CSS des navigateurs que les % peuvent valoir 100% 66% et 33% d'ou les différents grid en fonctions des différents medaiquery actif selon la largeur du navigateur .
Cordialement
Modifié par 75lionel (05 Apr 2017 - 23:51)
Déjà merci pour la réponse,

Je l'utilise dans le cadre d'un tuto, il semblerait que le cache de mon navigateur avais un prob, une fois le pc relancé tout fonctionnais comme je le désirais, mais il n'en reste pas moins que mon code est lourd, en fait j'ai un peut agit en hybride en le surchargeant, ne m'étant jamais servis d'un framework de ma vie, je crois l'avoir utilisé comme une béquille.

En tout cas encore merci, je sent que je vais avoir pas mal de lecture pour le comprendre.