Question

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

这就是我不想要的：http://i.stack.imgur.com/kK81j.jpg

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

有很多@media CSS元素我已经调整过，并试图直接删除但是它们似乎都没有做到这一点。对于我的生活，我似乎无法弄清楚当屏幕低于1024px时导致内容堆叠的原因。

任何建议都将受到赞赏。

Answer 1

如果不重新编写所有CSS以告诉您如何操作，很难建议您。我查看了源代码，主题是“移动优先”（即默认布局是移动布局，媒体查询扩充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;
  }
}

因此，当浏览器窗口的宽度高于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);
  }

你也需要为其他元素重复这个练习。

删除响应元素

1 个答案: