CODEWITHSUNDEEP
htmlcss
Tom
Tom

Reputation: 461

Mobile background image not aligned with text

I have a webpage that looks good on desktop, but the text is not properly aligned on mobile. The image background seems like it has padding/margin on the top, and pushes it down after the paragraph text. You can see the webpage here: http://cuttingedgeconversions.com/ebook/

Here is the code of the webpage:

<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>

Upvotes: 0

Views: 105

Answers (1)

yofisim
yofisim

Reputation: 370

Your problem is coming from the CSS within your media querie. On your file grayscale.css you have this:

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

So this it the behavior set. If you want to change this, you will have to set a proper media query, and override the previous code.

Example, for all screen from 414px and under:

@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*/
  }
}

The background-size property I've added in my example should fix the padding issue you have with the image.

Cheers.

Upvotes: 1

Related Questions