html - 手机背景图片与文字不对齐

Question

我有一个网页在桌面上看起来不错，但文本在移动设备上没有正确对齐。图像背景似乎在顶部有填充/边距，并将其向下推到段落文本之后。 您可以在这里查看网页: http://cuttingedgeconversions.com/ebook/

网页代码如下:

<header class="mobileBackground masthead">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h1 style="font-size:50px" class="brand-heading">Free eBook: "How to Date in the Marriage Zone"</h1>
                    <!--<p class="intro-text marginP">
                        Learn The 5 Essential Keys to Attracting the Love</i>
                    </p>-->
                    <!--<a href="#about" class="btn btn-circle js-scroll-trigger">
                        <i class="fa fa-angle-double-down animated"></i>
                    </a>-->
                </div>
                <br /><br /><br />
                <div style="width: 100%">

                    <span style="font-family: Arial; font-size: 26px; font-style: italic">What if you could wake up every single day next to the man of your dreams?<br /> 
                    A man that supported you?<br />
                    Where you didn’t need to choose between your needs and his needs?<br />
                    Where you could love without fear? You felt safe, confident, and secure from
                    the very beginning of the relationship?<br />
                    </span>
                    <img height="400" width="300" src="e-book.png" />
                </div>
                <a style="color: #ffffff;margin: 0 auto; margin-top: 20px; margin-bottom: 20px; font-size: 18px" href="#" class="myButton btn btn-default">I am ready for love<br />Register for FREE Webinar</a>
                <br /><br />
            </div>
        </div>
    </div>
</header>

Answer 1

您的问题来自媒体查询中的 CSS。 在你的文件 grayscale.css 上你有这个:

.mobileBackground {
    background: url(../img/intro-bg-small.jpg) repeat-y bottom center scroll;
    margin-top: 25%;
}

所以这是行为集。如果你想改变这一点，你将不得不设置一个适当的媒体查询，并覆盖以前的代码。

例如，对于 414 像素及以下的所有屏幕:

@media and (max-width: 414px) {
  .mobileBackground {
    background: url(../img/intro-bg-small.jpg) repeat-y bottom center scroll;
    margin-top: 0;
    background-size: contain; /* Set cover or contain and choose the behavior you want*/
  }
}

我在示例中添加的 background-size 属性应该可以解决图像的填充问题。

干杯。