css - 删除响应元素

Question

网站: http://jimouk.tumblr.com

我正在尝试从我下载的 Tumblr 主题中删除一些响应元素。我已经创建了一些翻转效果，当网站低于 1024 像素时，它会把它们弄乱。我也不喜欢它的外观，而且 Tumblr 有自己的移动主题。

这是我不希望它做的事情:/image/kK81j.jpg

无论屏幕分辨率如何，我都希望它保持不变。如果它生成一个超过 1024 像素的滚动条，而不是将菜单堆叠在内容之上，那就更好了。

我已经调整了许多@media CSS 元素，并试图彻底删除，但似乎没有一个能起到作用。对于我的生活，当屏幕低于 1024 像素时，我似乎无法弄清楚是什么导致了内容堆叠。

Answer 1

如果不重新编写所有 CSS 来向您展示如何操作，很难为您提供建议。我查看了源代码，主题是“移动优先”(即默认布局是移动布局，媒体查询会增加 CSS 以在视口(viewport)变宽时更改布局)。你可以在这里看到我的意思，容器包含你的博客帖子:

.the-posts {
  float: left;
  clear: both;
  width: 100%;
  position: relative;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .the-posts {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 1024px) {
  .the-posts {
    float: right;
    width: 560px;
    margin-top: -88px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease-in-out 0.2s;
    -moz-transition: all 0.2s ease-in-out 0.2s;
    -o-transition: all 0.2s ease-in-out 0.2s;
    transition: all 0.2s ease-in-out 0.2s;
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  .the-posts.ready {
    opacity: 1;
    visibility: visible;
  }
}

因此，当浏览器窗口的宽度超过 1024px 时，.the-posts 元素将移动到屏幕右侧。

相反，您应该用桌面规则替换默认的 .the-posts CSS 规则并删除所有媒体查询规则:

.the-posts {
    float: right;
    width: 560px;
    margin-top: -88px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease-in-out 0.2s;
    -moz-transition: all 0.2s ease-in-out 0.2s;
    -o-transition: all 0.2s ease-in-out 0.2s;
    transition: all 0.2s ease-in-out 0.2s;
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

您也需要对其他元素重复此练习。