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.
si quelqu'un pouvait m'expliquer ou ca cloche, merci d'avance.
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.