Text sprang auf kleinere Auflösung

Question

Ein Problem auf meiner Webseite, wenn auf einer kleinen Auflösung. (600px Breite)
sim.rgmgleague.com

Der Text wird alle komisch, wenn die Bildschirmauflösung kleiner wird, tritt nur auf einige der Einträge.

Answer 1

Sie müssen Ihre CSS und HTML ändern:

<div class="entry"> 
    <h4>August 23, 2016</h4> 
    <div class="team1"> 
     <div class="teambanner1"> 
     <img class="team_1_logo" src="assets/Anaheim.png"> 
     <h2 class="team_1_h2">Anaheim Receives</h2> 
     </div> 
     <h3>2019 Philadelphia 1st</h3> 
     <h3>Sean Couturier</h3> 
     <h3>James Wisniewski</h3> 
     <h3>Pascal Laberge</h3> 
    </div> 
    <div class="team2"> 
    <div class="teambanner2"> 
     <img class="team_2_logo" src="assets/Philadelphia.png"> 
     <h2 class="team_2_h2">Philadelphia Receives</h2> 
    </div> 
    <h3>Corey Perry</h3> 
    </div> 
</div> 

CSS:

.team1,team2 { 
    float: left; 
    width: 50%; 
} 

Danach können Sie andere Stile passen müssen:

.team1 { 
    float: left; 
    width: 50%; 
} 
.team2 { 
    float: right; 
    width: 50%; 
} 
.team_1_h2 { 
    margin-left: 10px; 
    float: left; 
} 
.team_2_h2 { 
    margin-right: 10px; 
    float: right; 
} 
@media screen and (max-width: 600px) 
.team_1_logo, .team_2_logo { 
    height: 20px; 
    margin-top: 7px; 
    float: right; 
} 
@media screen and (max-width: 600px) 
.teambanner1, .teambanner2 { 
    margin-top: -8px; 
    width: 100%; 
} 

Answer 2

ich es so tun würde, .

Die zweite Sache; in einigen Fällen fehlt div.players (Calgary 23. August 2016).

Auch Klasse "Spieler" sollte eine ungeordnete Liste sein (ul li).