Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap responsive, problème card espace img

    20 mai 2024 à 10:19:07

    Bonjour,

    Je poste ce sujet car je rencontre un problème avec bootstrap. En effet, j'ai créer une card et le principe c'est que si taille écran < 992 px, l'image va au dessus de mon card-titre et card-text, et > 992 px elle va à gauche. Seulement entre 992 et 1294, l'image ne prend pas toute la hauteur de la card comme je le souhaite de façon à ce que l'image prenne toujours la hauteur maximale gauche de la card si l'écran fait +992 et la largeur maximale de la card si l'écran fait - de 922 px.

    Je précise que si l'écran fait 991 pixel, l'image se place au dessus sans problème et prend toute la largeur de la card c'est vraiment que au dessus de 992 px que la card qui va automatiquement à gauche, ne prend pas tout la hauteur.

    J'ai fait un certains nombre d'essais différent sans trouver la solution alors je m'en remets à vous pour m'aider.

    Voici le code HTML :

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
    
      <link href="./css/bootstrap.css" rel="stylesheet">
    
      <link href="./css/style.css" rel="stylesheet">
      
      <title>Share Card</title>
    
    </head>
    <body>
    
      <div class="container-fluid">
      
      <div class="card m-3">
    
        <div class="row no-gutters align-card">
    
          <div class="col-lg-4 col-md-12 image-card-container">
    
            <img class="card-img rounded-lg-left image-card" src="./images/drawers.jpg" alt="drawer">
    
          </div>
    
          <div class="col-lg-8 col-md-12">
    
            <div class="card-body">
    
              <h2 class="card-titre">Shift the overall look and feel by adding these wonderful 
              touches to furniture in your home</h2>
    
              <p class="card-text">Ever been in a room and felt like something was missing? Perhaps 
              it felt slightly bare and uninviting. I’ve got some simple tips 
              to help you make any room feel complete.</p>
    
              <div class="perso">
    
                <img class="photo-profil" src="./images/avatar-michelle.jpg" alt="profil">
    
                <div class="profil">
    
                  <p class="name">Suzie Appleton</p>
    
                  <p class="date">28 Jun 2020</p>
    
                </div>
    
                <button id="button-share-open"><img class="share-fleche" src="./images/icon-share.svg" alt="button"></button>
    
              </div>
    
            </div>
    
            <div class="bandeau">
    
              <div class="bandeau-1">
    
                <p class="bandeau-text">SHARE</p>
    
              </div>
    
              <div class="bandeau-icone">
    
                <img class="icone" src="./images/icon-facebook.svg" alt="facebook">
    
                <img class="icone" src="./images/icon-twitter.svg" alt="twitter">
    
                <img class="icone" src="./images/icon-pinterest.svg" alt="pinterest">
    
              </div>
    
              <div class="bandeau-bouton">
    
                <button id="button-share-close"><img class="share-fleche" src="./images/icon-share.svg" alt="button"></button>
    
              </div>
    
            </div>
    
            <div class="pop">
    
              <div class="pop-1">
    
                <p class="pop-text">SHARE</p>
    
              </div>
    
              <div class="pop-icone">
    
                <img class="icone" src="./images/icon-facebook.svg" alt="facebook">
    
                <img class="icone" src="./images/icon-twitter.svg" alt="twitter">
    
                <img class="icone" src="./images/icon-pinterest.svg" alt="pinterest">
    
              </div>
    
            </div>
    
    
          </div>
    
        </div>
    
      </div>
    
    </div>
    
    <script src="./script.js"></script>
    
    </body>
    </html>

    Voici le code CSS :

    @import "./components/buttons";
    @import "./utils/variables";
    @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
    
    html, .container-fluid {
        height: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    body{
        font-family: "Manrope", sans-serif;
        letter-spacing: 1px;
        background-color: $light-grayish;
        display: flex;
        justify-content: center;
        align-content: center;
    }
    
    //!CARD-BODY--------------------------------------------------------------------------------------
    
    
    
    .card{
        position: relative;
        width: 78%;
        border-radius: 10px;
        border: none;
        margin: 0 auto;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }
    
    .align-card{
        display: flex;
        align-items: center;
    }
    
    .image-card{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        object-fit: cover;
        height: 100%;
    }
    
    .image-card-container {
        position: relative;
        overflow: hidden;
        padding: 0%;
        margin: 0%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .card .row {
        width: 100%;
        margin: 0;
    }
    
    .card-body{
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .card-titre{
        font-size: 17px;
        color: $dark-grayish-blue;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .card-text{
        font-size: 14px;
        color: $dark-blue;
        margin-bottom: 30px;
    }
    
    //!CARD-PROFIL----------------------------------------------------------------------------------
    
    .perso{
        display: flex;
        align-items: center;
    }
    
    .photo-profil{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    
    .profil{
        font-size: 14px;
        margin-left: 20px;
    }
    
    .name{
        margin-bottom: 1%;
        color: $dark-grayish-blue;
    }
    
    .date{
        color: $dark-blue;
        margin-bottom: 0px;
    }
    
    #button-share-open{
        border: none;
        border-radius: 50%;
        background-color: $light-grayish;
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
    }
    
    .share-fleche{
        width: 15px;
        height: 15px;
    }
    
    //!CARD-BANDEAU-------------------------------------------------------------------
    
    .bandeau{
        position: absolute;
        z-index: 2;
        background-color: $dark-grayish-blue;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        padding: 20px;
        visibility: hidden;
    }
    
    .bandeau.visible{
        visibility: visible;
    }
    
    
    .bandeau-text{
        color: $dark-blue;
        margin-right: 26px;
        letter-spacing: 2px;
        margin-bottom: 0px;
    }
    
    .icone{
        padding-left: 10px;
    }
    
    .bandeau-bouton{
        margin-left: auto;
    }
    
    #button-share-close{
        border: none;
        border-radius: 50%;
        background-color: $light-grayish;
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    
    //!POP----------------------------------------------------------------
    
    .pop{
        position: absolute;
        z-index: 2;
        background-color: $dark-grayish-blue;
        bottom: 30%;
        left: 75%;
        border-radius: 10px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 234px;
        padding: 20px;
        visibility: hidden;
        
    }
    
    .pop.visible{
        visibility: visible;
    }
    
    .pop-text{
        color: $dark-blue;
        margin-right: 26px;
        letter-spacing: 2px;
        margin-bottom: 0px;
    }
    
    .icone{
        padding-left: 10px;
    }
    
    .pop-bouton{
        margin-left: auto;
    }
    

    Et au cas ou, le code JS mais je ne pense pas qu'il y 'est besoin :

    let buttonOpen = document.getElementById('button-share-open');
    let buttonClose = document.getElementById('button-share-close');
    let bandeau = document.querySelector('.bandeau');
    let pop = document.querySelector('.pop');
    
    buttonOpen.addEventListener('click', () => {
        if (window.innerWidth < 991) {
            bandeau.classList.toggle('visible');
        } else if (window.innerWidth > 991) {
            pop.classList.toggle('visible');
        }
    });
    
    buttonClose.addEventListener('click', () => {
        if (buttonClose) {
            bandeau.classList.remove('visible');
        }
    });
    
    
    

    Je vous remercie par avance pour votre aide qui est la bienvenue! :)



    • Partager sur Facebook
    • Partager sur Twitter

    Bootstrap responsive, problème card espace img

    × 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