文字覆盖在导航栏

Question

我遇到了这个问题，文本覆盖在非常小的屏幕上，例如移动设备或镀铬的非常小的窗口。

Text Logo with the bug

我对导航栏的css如下所示：

.navbar-default  {
  background-color: #B71C1C;
  background-image: none;
  justify-content: center;
  height: auto;
  line-height: 18px;
  letter-spacing: 2px;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 20px;
  border-color: #FFF;
  position: relative;

}

.navbar-brand {
    font-size: 3em;
    margin-left: 25%;
    display: block;
    border-color: #FFF;
    z-index: 1;
}

我不确定是什么导致它，因为它从未出现在我的屏幕上（“24和iphone 6s +”），因为我的屏幕比其他人大。我得到的问题是来自试图查看我的网站的其他人的反馈如果在这种情况下第二个单词出现在第一个单词之下，那将会很棒。

此致 stAMy

Answer 1

试试这个可行。

  @media(max-width: 767px){
    .navbar-brand {
        font-size: 2em;
        margin-left: 0;
      }
    }

<强>解释

您使用了margin-left: 25%;，它占据了空白区域的25％，然后字体大小为3em。可能没有任何空格，因此文本中断并进入第二行。

尝试使用我提供的媒体查询中的字体大小和边距。