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%;
}

所以这就是行为集。如果要更改此设置，则必须设置正确的媒体查询，并覆盖以前的代码。

示例，适用于414px及以下的所有屏幕：

@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属性应该可以修复图像的填充问题。

干杯。

移动背景图像未与文本对齐

1 个答案: