删除响应元素

Question

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

这是我不希望它做的事情：https://i.stack.imgur.com/kK81j.jpg

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

有许多@media CSS 元素我已经调整，并试图彻底删除，但其中 none 似乎可以解决问题。对于我的生活，我似乎无法弄清楚屏幕低于 1024 像素时导致内容堆叠的原因。

Answer 1

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

.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;
  }
}

因此，当浏览器 window 的宽度超过 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);
  }

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

删除响应元素

Removing responsive elements

css

tumblr