网站在手机/平板电脑上看起来不太好，需要调整

Question

我的网站在手机或平板电脑上看起来不太好。问题主要在于标题和滑块，www.bluehaveninv.com

1. 标题在移动设备上太宽（两行） - 我希望它只有一个 行（也应包括汉堡菜单）
2. 滑块加载 v 很慢 - 首先只有小文本可见， 然后是旋转文本的一部分，然后是一些固定文本，然后是其余的 （但某些部分仍然被标题隐藏）。这个词不合适 在一行中 - 已尝试更改移动设备的字体大小，但不是 工作。
3. 滑块上的小文本在 iPad 上非常小。没问题 移动设备和桌面设备。
4. Let's work together 部分之间没有空格 移动的。有没有办法在两个块之间添加一些空间 - flex 容器 - 仅适用于移动设备？
5. 在 iPad 上，由于我在我们提供的产品中使用 3 个块，3 个 投资理念，第三部分左下方对齐 前两个给人一种被遗漏的感觉。在 桌面，3个全部显示在一条线上，看起来很棒。反正 居中对齐平板电脑的第三块？这是一个弹性容器。

我尝试使用下面的代码来修复滑块中的标题和字体，但没有任何反应。我已经刷新了我的 cloudflare 和站点缓存以及浏览器缓存。我已经在 ipad 6 (safari)、iphone 6 和 12 (safari、firefox、duckduckgo) 上测试过了

  @media (max-width: 767px) {
.hero__content h2 {
  font-size: 20px !important;
}  
  .site-branding { max-width: 80% !important; }
  .site-header { max-width: 80% !important; }
} 

@media 之后我在代码中添加了“screen and”这个词并再次尝试，但无济于事。

Answer 1

试试看

@media all and (max-width: 767px) {
.hero__content h2 {
  font-size: 20px !important;
}  
  .site-branding { max-width: 80% !important; }
  .site-header { max-width: 80% !important; }
}