有没有办法让移动版中的横幅链接水平显示而不是垂直显示？谢谢！
4 个赞
4 个赞
非常感谢，不知何故我没注意到。它完美运行！
4 个赞
5 个赞
以下是如何自定义横幅以使其在小屏幕上不那么高的示例代码：
：警告：将其放在主题自定义的mobile选项卡中！
// 使欢迎横幅适应小屏幕尺寸
.below-site-header-outlet.welcome-link-banner-connector {
.welcome-link-banner-wrapper {
background-image: url($mobile-banner-bg);
background-size: cover;
.welcome-wrapper {
.featured-banner-link {
flex-direction: row;
padding-bottom: 0.5em;
>div a {
padding: 0 5px;
h3 {
font-size: 0.75em;
white-space: normal;
}
}
}
}
}
}
根据您的需求进行调整（这就是为什么会有“空”的 SCSS 嵌套）。
目前，它在我的当前项目中看起来像这样：
编辑：@Moin 比我更快地提到了我自己的调整……太棒了 
11 个赞
这对“欢迎横幅”的移动外观来说是一个巨大的改进。就在昨天，我看到一个新用户通过手机注册了我的网站，他们被横幅的巨大尺寸绊倒了；基本上他们没有意识到他们必须向下滚动才能看到操作。因此，我一直在寻找更好的东西，而那段 CSS 代码非常棒。
我不得不删除了 background-image: url($mobile-banner-bg);，因为很明显你这是从一个分叉的 TC 中复制过来的。
@awesomerobot，您是否会考虑提交一个 PR，将此移动增强功能添加到主题组件中？
6 个赞
当然，PR 总是受欢迎的
3 个赞
嗨 @awesomerobot，鉴于我还没有看到相关的 PR，我刚刚创建了一个 PR 来添加 @Canapin 所做的增强功能，并添加了两个本地化。 
6 个赞
我查看了一下，发现您已按照 @team 的要求移除了 Locale 更改。但是，PR 已关闭，所以我为您重新打开了一个：
6 个赞
太棒了！你认为什么时候会合并？
2 个赞
我不确定——@awesomerobot，我的 PR 还可以吗？
5 个赞
在我看来不错，已合并。谢谢！
6 个赞
太棒了！但垂直图标的问题在平板电脑上也会出现，所以只使用移动设备的自定义 CSS 会从太小的屏幕尺寸开始。不幸的是，Discourse 的自定义 CSS 不允许你针对平板电脑。我的解决方案是将以下文本放在 common 自定义 CSS 选项卡中。
它还包括修复平板电脑视图中右侧不必要的间距的问题，我还选择将链接的字体大小增加到 1em。
@media (max-width: 768px) {
.below-site-header-outlet.welcome-link-banner-connector {
.welcome-link-banner-wrapper {
background-size: cover;
.welcome-wrapper {
.welcome-content {
> p {
max-width: initial;
}
}
.featured-banner-link {
flex-direction: row;
padding-bottom: 0.5em;
> div a {
padding: 0 5px;
h3 {
font-size: 1em;
white-space: normal;
}
}
}
}
}
}
}
3 个赞
谢谢你的信息！
我没有将我的移动版本作为 pull request 推送到主题组件，因为我没有在各种配置下对其进行测试。而你的消息表明移动端代码确实需要进一步完善 
3 个赞
此主题已在 801 天后自动关闭。不再允许回复。