Forum : Déformations sous Bootstrap

Bonjour !

Je suis en train de finaliser mon site Web, mais il y a un bug vraiment bizarre...

Si j'ouvre l'index dans une grande fenêtre, tout va bien jusqu'a que je la réduise en format téléphone, et tout part en vrac (les articles se superposent). Au contraire, si je l'ouvre dans une fenêtre de taille téléphone, tout se formate bien en une colonne, mais si j'agrandis la fenetre en largeur, mes articles repartent en vrac...

Une idée ? (je vous joint la structure globale du body, s'il vous en faut plus n'hésitez pas !)

Et merci d'avance ;)

<body>
    <div id="fb-root"></div>
      <script>...</script>
        <div class="background-image-overlay"></div>
        <div id="outer-background-container"></div>
        <div id="outer-container">
            <section id="left-sidebar">...</section>
            <section id="main-content" class="clearfix">
                <article id="galerie" class="section-wrapper clearfix modified-height" data-custom-background-img="assets/images/fond1.jpg"> ... </article>
                <article id="actus" class="section-wrapper clearfix modified-height" data-custom-background-img="assets/images/fond2.jpg"> ... </article>
                <article id="contact" class="section-wrapper clearfix modified-height" data-custom-background-img="assets/images/fond3.jpg">... </article>
         </section>
            <section id="footer" class="section-wrapper clearfix active" data-custom-background-img="assets/images/other_images/bg4.jpg"> ... </section>

Pierre Ftn

Tu peux nous mettre ton css svp

JC_Pires

Donne nous ce que tu as dans la partie head également stp

Salomé PeterPan

Auteur

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Peintures</title>

    <!-- favicon -->
    <link rel="icon" type="image/png" href="assets/images/signature.png">

    <!-- Bootstrap core CSS -->
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="assets/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- styles for this template -->
    <link href="assets/css/styles.css" rel="stylesheet">

    <!-- place your extra custom styles in this file -->
    <link href="assets/css/custom.css" rel="stylesheet">
    <!-- owl carousel css -->
    <link href="assets/js/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/js/owl-carousel/owl.theme.css" rel="stylesheet">
    <link href="assets/js/owl-carousel/owl.transitions.css" rel="stylesheet">
    <!-- intro animations -->
    <link href="assets/js/wow/animate.css" rel="stylesheet">
    <!-- font awesome -->
    <link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- lightbox -->
    <link href="assets/js/lightbox/css/lightbox.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

Et voici mon custom.css (j'ai très peu modifié le css original)

#galerie{
    margin-top: 0%;
    width: 90%;
    margin-bottom: 15%;
    margin-right: 0;
}

#sizeme{
    height: 216px;
}

#carousel-inside{
    left: 16%;
}

#actus{
    margin-top: 40%;
    bottom: 5%;
}

#contact {
    text-align: center;
    min-height: 100%;
    height: 50%;
    width: 80%;
    margin-top: 40%;
    right: 5%;
    min-width: 95%;
    margin-bottom: 15%;
    left: 5%;
}

#blanc{
    height: 100px;
}

#fb{
    height: 100%;
    margin-right: 0%;
    margin-top: 21px;
    text-align: center;
}

#livre-d-or{
    height: 41%;
    margin-top: 0%;
    margin-bottom: 13px;
    margin-left: 0%;
    width: 65%;
    min-height: 40%;
}

#copy{
    text-align: center;
    margin-top: 5px;
    margin-left: 19%;
    color: white;
    width: 27%;
    min-width: 27%;
}

Elsenthil

Salut

Peux tu nous dire avec quel navigateur tu rencontre le problème stp ? et partage le html complet de ton layout.
Au pif je dirais qu'il y a une balise mal fermée un css qui n'est pas chargé ou un js qui casse ta mise en page. Les possibilités sont nombreuses mais la méthode à avoir c'est commenter tes différents scripts et css jusqu'à trouver lequel casse ton bootstrap.

Si tu utilises un thème que tu as téléchargé vérifie sur la démo que ce comportement là n'existe pas sinon c'est le thème qui pose problème et là bonne chance pour tout modifier.

Bref, déjà, essaye de retirer tes styles les uns après les autre excepté bootstrap pour voir sur lequel ça pêche.

zkiller

ces moi ou je ne voie pas de bootstrap dans tes code ?
ou son tes collonne ?

Example:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Alexandre #lbac

Exact, il manque le container ;)

Ainsi que les colonnes. C'est ce qui rend le design responsive justement.

Déformations sous Bootstrap

6 réponses