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

Question

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

我在移动设备上的跳出率非常糟糕。

网址是http://developcents.com。主页在任何设备上看起来都不错。但是，在某些屏幕尺寸（包括移动设备）中查看时，内部页面需要很多帮助。我们以http://developcents.com/blog 为例。

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

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

另外，作为次要问题，如果您想提供关于我实际需要更改的内容的指示，那么请成为我的客人！但是，如果您指出我如何自己解决问题的正确方向，那也很好。 :)

让我们进入场景（您可以通过自己的测试轻松看到）：

当我将浏览器窗口缩小到一定大小时，左侧边栏中的链接和推文部分会向右移动，因此导航栏的左侧与标题区域的右侧对齐，而内容跨越页面的整个宽度，除了左边距，它保持在原地但变得更宽。基本上标题下面的所有内容都搞砸了，看到问题比解释问题更容易（所以去测试一下）。

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

Answer 1

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

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

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

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

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

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