跳跃在更小的决议的文本

Question

在小分辨率下在我的网页上出现问题。 （600px宽）
sim.rgmgleague.com

当屏幕分辨率变小时，文本会很奇怪，只会出现在某些条目上。

Answer 1

你必须改变你的CSS和HTML：

<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 {
    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

我会这样做：

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

之后你需要匹配其他风格。

第二件事;在某些情况下，div.players失踪了（卡尔加里2016年8月23日）。

此外，“玩家”类应该是无序列表（ul li）。