为什么标题在小屏幕上超过了屏幕的宽度?

时间:2018-09-25 04:59:32

标签: html css twitter-bootstrap css3 bootstrap-4

我有一个使用Bootstrap v4.0.0-alpha.6构建的网站,这是该网站的链接: bit.ly/2xEmQ7U请在网址开头添加https://

特别是在移动浏览器上,标头超出了宽度,内容大约占屏幕宽度的30-40%。

尽管我使用的是现代浏览器Chrome,但当我将浏览器窗口缩小到490px以下时,就会显示该信息。

这个问题在移动设备上确实很明显,我在android上进行了测试。

有一个名为home.css的样式表,其中包含库(Bootstrap,Fontawesome等)和自定义CSS。

我试图给bodyhtml margin: 0padding: 0overflow: hidden

还尝试删除一些元素并更改某些样式属性。

但是我无法使其正常工作。

我知道我必须提供一些代码,我确实尝试并花费了数小时试图提取一些元素并创建一个小提琴和一个代码片段,但是我不能,因为有很多元素并且样式表包含超过15000行库代码和自定义代码的组合。

2 个答案:

答案 0 :(得分:0)

问题在您的视口meta中,请在视口下方使用

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1" />

答案 1 :(得分:0)

正如我在评论中提到的那样,问题出在您的.hero-unit。(“动画”部分)

尝试在CSS中添加overflow: hidden;代码

.rotating-words {
    display: inline-block;
    position: absolute;
    margin-left: 5px;
    overflow: hidden; /*Added newly*/
}