CSS 帮助自定义页脚小部件答案

【问题标题】：CSS help to customize footer widgetsCSS 帮助自定义页脚小部件
【发布时间】：2021-09-15 05:15:46
【问题描述】：

我是网页设计的初学者，我的网页需要一些帮助。我使用 wordpress / 生成新闻模板。在桌面模式下，页脚中的 4 个小部件在一行中，但是当我切换到平板电脑或移动设备时，它们彼此重叠。我已经设法更改页脚中文本的字体大小，但我仍然无法在平板电脑和移动设备的单行中获取小部件。你能帮我么？请尝试用最简单的术语解释，因为我还没有那么好 :D 谢谢！

【问题讨论】：

不看代码就不可能 100% 知道，但这听起来像是一个响应式 CSS 问题。如果您使用的是 Bootstrap 或类似的 UI 框架/库，那可能是其中的一部分。通常可以创建具有更高特异性分数的 CSS 选择器来覆盖默认值，但可能存在媒体查询破坏该解决方法。一些 Google 友好的短语：CSS 特异性、响应式 CSS、CSS 媒体查询。
为什么要将它们排成一行？它们是这样移动的，因此用户最好能够在不眯眼或水平滚动页面的情况下看到它们。如果您真的想将它们排成一行，我们将需要您的主题名称，因为每个人都不同。谢谢。

标签： css widget footer

【解决方案1】：

谢谢你，我终于在浏览我的网页时找到了一种在浏览器中使用旧的 F12 命令的方法。这个命令帮助我解决了我遇到的大多数问题。

我使用了这个代码：

.inside-footer-widgets {
        display: flex;
    flex-direction: row;
        align-content: center;
        align-items: center;}

虽然我对最后一个不太满意，但第四个小部件的文本并没有将内容与中心对齐。

在平板电脑上，我发现页面看起来不整洁，所有小部件都在彼此下方，现在更好了。对于移动视图，我保留了堆叠版本。这是我的网站www.steelspiritdesigns.com

【讨论】：