HTML Textkasten komisch

[netzgestaltung]

Also gut, ich denke es sollte so sein:

<!--End of item with active-->
<div class="item">
  <div class="row">
 
    <div class="col-md-3">
 
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
 
    </div>
<!-- Problem:
    <div class="col-md-3">
      <div class="profile-picture">
--><!-- wird weiter verwendet
        <div class="col-md-3">
          <div class="profile-circle">
              <img src="img/team12.jpg" alt="">
          </div>
          <div class="testimonial_content">
              <i class="fa fa-quote-left"></i>
              <p>PROBLEM ist Tierschutzbeauftragte des Vereins und achtet auf das Wohl der Tiere. .</p>
          </div>
          <div class="testimonial_author">
              <h5>PROBLEM</h5>
              <p>PROBLEM</p>
          </div>
        </div>
--><!-- Ende Problem
      </div>
    </div>
-->
<!-- Lösung: -->
 
    <div class="col-md-3">
   
      <div class="profile-circle">
        <img src="img/team12.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>Lösung ist Tierschutzbeauftragte des Vereins und achtet auf das Wohl der Tiere. .</p>
      </div>
      <div class="testimonial_author">
        <h5>Lösung</h5>
        <p>Lösung</p>
      </div>
   
    </div>
<!-- Ende Lösung -->
    <div class="col-md-3">
 
      <div class="profile-circle">
        <img src="img/team7.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY ist die Ansprechpartnerin für Boxenvermietung und Voltigieren. Sie erreichen Sie unter <br><b>XY.</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
 
    </div>
 
    <div class="col-md-3">
 
      <div class="profile-circle">
        <img src="img/tmp.png" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY ist für die Versorgung unserer Pferde und Ponys zuständig.</p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
 
    </div>

  </div>
</div>
<!--End of item with active-->

 

[einfachpeer]

Übrigens: Wenn das sowohl auf mobilen Clients bzw. auf kleineren Displays als auch auf größeren Displays zum Einsatz kommen soll, musst du dich mit den Größen-Klassen im Detail auseinandersetzen.

Das System skaliert in 4 Stufen:

xs
sm
md
lg

Wenn du zB col-md-3 verwendest, gilt das für md und lg. sm und xs sind dabei undefiniert bzw. das wird dann irgendwie automatisch gemacht. Will man das anpassen, muss man ggfs class="col-xs-6 col-md-3" machen, was dann für xs und sm 6 Spalten bedeuten würde und für md und lg 3.

<!--End of item with active-->
<div class="item">
  <div class="row">
   
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>
   
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>
   
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>
   
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>

  </div>
</div>
<!--End of item with active-->

So klappts

 

[Raijin]

Wenn ich den Block rausnehme wie auf dem Screenshot zu sehen ist wird die Seite viel Größer als vorher ihr seht es ja. Und mit eben nicht.

Nein, das sehen wir eben nicht. Wenn du einfach nur einen Screenshot postest und dazu sagst "Hab ich doch gemacht", aber keinen Code dazu, kann niemand sagen was genau du denn gemacht hast, was zu dem Ergebnis im Screenshot geführt hat. Wir sitzen nicht neben dir und gucken auf deinen Monitor. Fakt ist aber, dass du 4 identische Boxen haben möchtest, die fehlerhafte Box jedoch von zusätzlichen divs umschlossen ist. Das musst du fixen wie nun schon mehrfach geschrieben und gezeigt.

 

[einfachpeer]

Danke euch !