Question

我是WordPress的新手，我希望我能正确解释我的问题。

我正在使用带有子主题和自定义代码的Genesis主题。子主题是响应式的，我的自定义代码包含以下规则：

h1 {
  font-size: 30px;
  margin: 0 0 10px 240px;
}

.picture {
  float: left;
  margin-left: 110px;
  margin-top: 65px;
  margin-bottom: 30px;
}

要注意，我的大部分页面都使用自定义代码类而不是子主题中的代码类。我听说我应该在自定义代码中尝试@media以使其响应。我用它测试了它：

@media only screen and (max-width: 480px) {
  #content {
   max-width: 600px;
  width: 66.7%; 
 }
#sidebar {
  max-width: 300px;
  width: 33.3%; 
 }
}

但它根本没有效果。任何评论都会有帮助。

提前致谢！

Answer 1

您是否以这种方式尝试了@media query方法？

/* Smartphones (portrait and landscape) ----------- */
@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
/* Styles */
}

使用@media不起作用的WordPress主题响应

1 个答案: