css - 修复有问题的响应式 CSS Zen 子主题

Question

我有一个响应式 Drupal Zen 子主题，大约一年半前，我从一个非 Drupal 设计师为我的网站交给我的一些 CSS 和 HTML 中拼凑而成。我知道在某些布局中，它是有问题的，需要修复，但我还没有解决它。在反复联系本地的 Drupal 开发人员(并提出付钱给他)之后，我已经厌倦了等待，只需要解决这个问题。

我对移动设备用户的跳出率非常糟糕。

网址是http://developcents.com .主页在任何设备上看起来都不错。但是，在某些屏幕尺寸(包括移动设备)下查看时，内部页面需要很多帮助。让我们使用 http://developcents.com/blog举个例子。

在下面的场景中，我的问题不是如何找到 CSS 文件本身。相反，我的问题是，如何使用 Firebug Lite 找到必要的 CSS 设置，以便我可以通过浏览器调试 CSS，而不是每次我想测试更改时都必须手动更新每个 CSS 文件？

我找不到实际的 CSS 样式的 div、blocks 等...导致布局在某些尺寸下中断。我知道如何在 CSS 面板中查找和编辑 CSS，但我无法在这种情况下找到具体的 CSS。

此外，作为一个次要问题，如果您想就我实际需要更改的内容提供指导，请成为我的客人!但是，如果您为我指明了正确的方向，让我知道如何自己解决问题，那也很好。 :)

让我们进入场景(您可以通过自己的测试轻松看到):

当我将浏览器窗口缩小到一定大小时，左侧边栏中的链接和推文部分移到右侧，这样导航栏的左侧与标题区域的右侧对齐，而内容横跨页面的整个宽度，左边距除外，它保留在原位但变宽了。基本上标题下面的所有内容都搞砸了，发现问题比解释问题更容易(所以去测试吧)。

在 Chrome 中使用 Firebug Lite，我似乎找不到“主要”内容区域的左边距(请参阅此屏幕截图清楚地指示黄色边距)，也找不到导航栏/推文 block 的 CSS(我认为这是某种 float )。

Answer 1

要在 Firebug 或 Firebug Lite 中修改 CSS，只需在 HTML panel 中选择一个元素即可。或通过其检查员对其进行检查。 Style side panel里面您会看到所有应用于该元素的 CSS 规则。

单击 CSS 属性的名称或值会打开一个内联编辑器以允许对其进行编辑。

在每条规则的右侧，您会看到样式表的名称，其中包含该规则。悬停它会显示完整的 URL，单击它可以让您在 CSS panel 中检查它。 .

您还可以直接在 CSS 面板中编辑样式，该面板列出了页面上所有可用的样式表。

注意:您在那里所做的更改不是永久性的，即在下一页重新加载时它们就消失了!要进行永久更改，您需要编辑服务器上的文件。

另请注意，我指的是 Firebug 中的面板。 Firebug Lite 中的面板基本上工作方式相同，但外观和工作方式可能略有不同。此外，不再维护 Firebug Lite，因此无法保证一切都按预期工作。