headerwrap h9

Question

我已经使我的文本响应，并且它在大多数页面中都有效，但在我的主页上，当窗口调整大小时它会溢出边缘。

h12 {
    width: 120%;
    display: block;
    padding-top: 40px;
    padding-bottom: 30px;
    padding-left: 15%;
    padding-right: 5%;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    color: #a7ad8d;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    position: relative;
    overflow: auto;
}
    
h9 {
    display:block;
    text-align: left;
    font-family: a;
    color: #ffffff;
    font-size: 14px;
    margin-top: 20px;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}
#headerwrap {
    background: url(../img/back.jpg) no-repeat center top;
    margin-top: -70px;
    padding-top: 250px;
    text-align: left;
    background-attachment: relative;
    background-position: center center;
    min-height: 650px;
    min-width: 200px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h9 {
    padding-left: 5%;
    padding-right: 84%;
    width: 1200px;
    text-align: left;
    padding-top: 5px;
    font-weight: 400;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headerwrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-2">

                <h12>WE ALIGN PROFESSIONAL FIRMS TO ACHIEVE THEIR GREATEST VALUE</h12>
                <h9> Worthmore provides the focus, structure, accountability and support so leaders can take their firm to continuous improvement and growth.</h9>
                <h9> Our leadership and experience in Accounting & Financial Services, and in significant senior corporate roles, provides a breadth of knowledge that can be applied to a multitude of business environments and situations.
We add value by asking the questions that need to be asked, and providing insights and input into the decision-making process.</h9>
            </div>
        </div>
    </div> 
</div>

Answer 1

用于身体集溢出：隐藏; css：body {overflow：hidden}

Answer 2

从以下内容中移除宽度：

headerwrap h9
来自h12

通过添加不需要的宽度（120％和1200px），您将离开内容区域，从而获得水平滚动。

您创建的这个RWD网站？那么请阅读：

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

完全理解RWD（响应式网页设计）

Answer 3

在响应式设计中，请勿使用固定的宽度值。

我发现你正在使用 #headerwrap h9 {width: 1200px;}这会使您的网站无法响应

尝试使用％值 #headerwrap h9 {width: 100%;}

文本在流动的边缘，即使它是响应

3 个答案:

headerwrap h9