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;
      }
    }

Answer 1

[regex9]

1) Das figcaption-Element heißt so, weil es eine Beschriftung zu einem figure-Element liefert. Nicht zu einem Link.

Also:

<a href="#schuh">
  <figure class="produkt">
    <!-- div with img ... -->
    <figcaption class="beschreibung">
      <!-- .... -->
    </figcaption>
  </figure>
</a>

Folgendermaßen ändert sich auch dieser Selektor:

 .produkt a {
  display: flex;
}

zu:

.produkt {
  display: flex;
}

Wenn das Bild erst bei kleineren Auflösungen über dem Text stehen soll, dann füge diesen Selektor nur in einem entsprechenden Media-Query ein. Bei dir wäre es der erste:

@media screen and (min-width: 751px) {

2) Die Properties height und width würde ich aus dem .produkt-Selektor entfernen. Sie sorgen sonst dafür, dass die Texte über die Box laufen, wenn nicht mehr genügend Platz für sie vorhanden ist.

Comments

[Thoss]

Hallo, und danke für deine Hilfe. Im html stimmt jetzt alles, aber im CSS habe ich noch einen Fehler. Irgendwie steht der Text immer noch neben dem Bild wenn das Browserfenster kleiner als 750px ist, aber wenn das Fenster größer ist, dann ist es darunter. Könntest du dir das nochmal anschauen? Danke! Hier ist mein Code:

  @media screen and (min-width: 751px){
    #produkte {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
    .produkt {
        max-width: 700px;
    }
}
  
    .produkt {
        border: solid #e4e4e4;
        background-color: white;
        padding: 10px;
        margin: 20px;
        text-align: left;
    }
    .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;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
      }
      .produkt  {
          display: flex;
      }
    }

[regex9]

@Thoss

Im untersten Media Query fliegt .produkt raus. Sein display-Property gehört dafür in den obersten Media Query.

Answer 2

[germanils]

Du nutzt doch eh schon Media Queries im CSS.
Einfach für kleinere Screens die feste Breite von 700px rausnehmen. Und ggfs. das Bild dann floaten lassen.

Woher ich das weiß: Berufserfahrung – Entwicklung von Apps und Websites