使用媒体查询最小化屏幕时照片消失答案

【问题标题】：Photo disappearing when screen is minimized using media queries使用媒体查询最小化屏幕时照片消失
【发布时间】：2016-05-03 20:04:52
【问题描述】：

我创建了一个带有 2x2 照片网格的网页。当屏幕宽度小于 1300 像素时，我使用媒体查询将照片转换为 1x4 网格。问题是当我最小化屏幕时右上角的一张照片消失了。它发生在 600px 和 1300px 之间。

这是代码笔：http://codepen.io/queenlizo/full/bEvQRJ/

这些是有问题的媒体查询：

.center-row > div > p,
    .center-row > div > ul {
    display: block;
 }

.center-row > div {
  height:100%;
  width:100%;
  display: table-cell;
  border:0;
  color:#fff;
  vertical-align: middle;
  }

  .center-row > div:hover > p,
  .center-row > div:hover > ul,
  .center-row > div:hover > h2 {
    display: block;
    padding: 0 0 0 0;
    opacity: 1;
  }
}
@media all and (max-width: 1300px)  {

  .center-row > div {
       height:100%;
       width:100%;
       display: table-cell;
       border: 0;
       color:#fff;
       vertical-align: middle;
   }
}

任何帮助将不胜感激！

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap media-queries

【解决方案1】：

在.center-row 中删除：

display: table-row;

【讨论】：

谢谢！那行得通，但是图片在 Firefox 中无法正确显示。我会再玩一些。感谢您让我走上正轨。

【解决方案2】：

您是否尝试过删除@media 中的all and。全部是默认设置，不需要and，因为您没有加入任何内容。

应该写成如下： @media (max-width: 1300px)

希望这会有所帮助。

【讨论】：

感谢您的回答！不幸的是，它没有用。