CODEWITHSUNDEEP
htmlcssimage
Mark L
Mark L

Reputation: 759

Weird image behaviour

I'm having some weird image behaviour on different devices.

I've been testing the website on a 1920x1080 PC, 1440 x 900 Mac, and 1920x1080 iPhone.

Where they all look fine.

However, when asking others to test it. They are getting drastically different behaviour on their end.

Here's what it's supposed to look like:

enter image description here

The "graphic" (devices, and window) is located towards the top of the screen.

However this is what it looks like on an Ipad:

enter image description here

The graphic image, for some reason gets displayed really far down on the page.

There's the same problem using Firefox on Linux

enter image description here

I havn't done anything to position it in HTML. Here's the relevant code:

<header>
    <div class="header-content">
        <div class="header-content-inner">
            <img src="/img/graphic.png" class="img-graphic">
            <!-- <h1>Experience new technological breakthroughs in the field of investing</h1>
            <hr> -->
            <p style="padding-top: 10px">What if it was possible to identify some of the next years' winners in the markets today with an 83%, 90%, or 95% average success rate?<sup>*</sup></p>
            <a id="read_more" href="#formula-stocks" class="btn btn-primary btn-xl page-scroll" style="opacity: 1!important">Would you be interested?</a>
            <a id="signup-a-btn" href="/register" class="btn btn-primary btn-xl">Sign Up for Free</a>
            <br /><sub><small>(*) Based on averages of cumulatively 9,800 recommendations.</small></sub>
        </div>
    </div>
</header>

And here's the relevant CSS for it:

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #FAFAFA;
    background-image: url("../img/header-2.jpg");
    background-position: bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover
}

.img-graphic {
    max-width: 100%;
    text-align: center
}
header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center
}

I don't have anything that I can see, would cause the image to be placed so far from the top on some devices?

The "graphic" itself is just this:

enter image description here

It does have some room on the side. But nothing above it, that should cause this behaviour to my knowledge.

I do have some @media in my code which is here below, if that has anything to do with it.

@media (min-width: 768px) {
    header {
        min-height: 100%
    }
    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        transform: translateY(-50%)
    }
    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px
    }
}

Any help figuring out how to fix this odd behaviour on Linux / Ipad, would be greatly appreciated!

Thanks!

Upvotes: 3

Views: 57

Answers (1)

Siguza
Siguza

Reputation: 23930

That would be your home.min.css, lines 1009 and 1011, with (irrelevant code removed):

@media (min-width: 768px) {
    header .header-content {
        top: 50%;
        transform: translateY(-50%);
    }
}

As of iOS 8.4, Mobile Safari doesn't support transform, only -webkit-transform.
Add the line

-webkit-transform: translateY(-50%);

to that selector and you should be good to go.

Upvotes: 1

Related Questions