Verwandte Themen

Thoss
02.07.2021, 10:07
Div Box ragt über Rand hinaus?

Hallo, mein Problem ist, dass wenn ich das Browserfenster verkleinere die Div über den Rand geht. Perfekte Lösung wäre, wenn der Text dann unter dem Bild erscheint, sobald er zu klein für das Fenster ist. Code:


                <div id="produkte">
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh"></div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                    </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                            </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                </div>
  } 
  @media screen and (min-width: 751px){
    #produkte {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
}
    .produkt {
        width: 700px;
        border: solid #e4e4e4;
        background-color: white;
        padding: 10px;
        margin: 20px;
        height: 200px;
        text-align: left;
        height: 200px;    
    }
    .produkt img {
        width: 180px;
        padding: 15px;
    }
    a {
        font-size: x-large;
        color:#3f79e6;
        display: flex;
        text-decoration: none;
}
    @media screen and (max-width: 750px){
      #produkte {
          display: flex;
          flex-direction: column;
          align-items: center;
          max-width: 100%;
          height: auto;
      }
      .produkt a {
          display: flex;
      }
    }
Computer, HTML, programmieren, CSS
2 Antworten

Meistgelesene Beiträge zum Thema Computer
Mehr meistgelesene Fragen zu Computer