Header image in HTML won't stay in the same position in another computer

Hello, I made this website with html the other day: https://ghiblimovs.herokuapp.com/
The thing is, that even though the header image is centered on my screen, when my friend opened the website in her computer, the image was way more to the left and top side of the website instead. I have tried changing things and I played around with media queries but something isn’t working… Any help would be very appreciated!

This is my html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Ghibli Studio | Movies</title>
    <link rel="stylesheet" href="{% static 'core/main.css' %}">
</head>
<body>
    <div class=" header">

    </div>
    <div class="wrap">
        <form action='/' method="POST">
            {% csrf_token %}
            <div class="search">


                <input type="text" name="search" class="searchTerm" placeholder="Type movie name">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <button type="submit" class="searchButton">

                    <i class="fa fa-search" style="font-size:24px"></i>
                </button>

            </div>


        </form>
    </div>

    {% if movies %}
    {% for movie in movies %}
    <div>
        <ul class="result">
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');
            </style>
          
            <h4>{{movie.Title}}</h4>
            <h5 style= "color:lightslategray;">
                Release date: {{movie.Release_date}} <br>
                Director: {{movie.Director}}
                <br>Producer: {{movie.Producer}}
                <br>
                <br>{{movie.Description}}
            </h5>
          

        </ul>
        {% endfor %}

        {% endif %}
    </div>


</body>
</html>

This is my css:

body {
    background: #D4E6F1;
    font-family: 'Open Sans', sans-serif;
}
.header {
    background: url(https://upload.wikimedia.org/wikipedia/sco/thumb/c/ca/Studio_Ghibli_logo.svg/640px-Studio_Ghibli_logo.svg.png) no-repeat;
    font-size: 14px;
    width: 640px;
    height: 307px;
    background-size: 70%;
    display: block;
    margin-top: 80px;
    margin-left: auto;
    margin-right: 340px;
}

.search {
    width: 100%;
    margin-bottom: 150px;
    display: flex;
}

.searchTerm {
    width: 100%;
    border: 3px solid #AEB6BF ;
    border-right: none;
    padding: 5px;
    height: 20px;
    margin-top: 110px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #AEB6BF ;
}

    .searchTerm:focus {
        color: #808B96;
    }

.searchButton {
    width: 40px;
    height: 36px;
    border: 2px solid #AEB6BF;
    background: #D4E6F1;
    text-align: center;
    color: #AEB6BF;
    margin-top: 110px;
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
html {
    font-family: 'Dosis', sans-serif;
    line-height: 1.6;
    color: #666;
}



h4 {
    margin-bottom: 500px;
    margin-top: -50px;
    width: 20%;
    height: 5px;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    padding: 1.5rem 2rem;
    background: url(https://cdna.artstation.com/p/assets/images/images/017/168/420/large/emrullah-cita-ghibli-clouds.jpg?1554902207);
    background-position: center;
    font-size: 1.3rem;
    color: #ffffff;
    text-shadow: #000000;
    position: absolute;
    top: 63%;
    border-radius: 12px 12px 0 0;
    left: 38%;
}
h5 {
    margin-top: -50px;
    background: #F2F4F4;
    width: 20%;
    height: 290px;
    text-align: justify;
    font-family: 'Dosis', sans-serif;
    padding: 1.5rem 2rem;
    font-size: 1rem;
    position: absolute;
    top: 70%;
    left: 38%;
    overflow: hidden;
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    border-radius: 0 0 12px 12px;

}

Hello @micaelagimenez,

The problem with absolutely positioned elements, is that, depending on the viewport and parent element, their positions can differ drastically, unless you have a bunch of media queries to correct those positions.

What you’re attempting can be done without relying on position or transform. Here’s a few suggestions:

.header

  • Add center to the background property; this will center the background on all devices.
  • Change margin-right: 340px; to margin-right: auto;, with left and right set to auto, it’ll center the header on all devices.

You could also put the image in the header as an <img> element, then set the max-width on the image to 100% to resize the image on all devices. text-align:center; on .header should center the image.

.wrap

  • Drop the position, top, left, and transform properties.
  • Add margin:0 auto; to center the wrap.

.searchTerm AND .searchButton

  • Drop margin-top: 110px; or lower its value. With the above rules changed, you’ll most likely not need this.

Here is the changed CSS:

body {
    background: #D4E6F1;
    font-family: 'Open Sans', sans-serif;
}
.header {
    background: url(https://upload.wikimedia.org/wikipedia/sco/thumb/c/ca/Studio_Ghibli_logo.svg/640px-Studio_Ghibli_logo.svg.png) no-repeat center;
    font-size: 14px;
    width: 640px;
    height: 307px;
    background-size: 70%;
    display: block;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}

.search {
    width: 100%;
    margin-bottom: 150px;
    display: flex;
}

.searchTerm {
    width: 100%;
    border: 3px solid #AEB6BF ;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #AEB6BF ;
}

    .searchTerm:focus {
        color: #808B96;
    }

.searchButton {
    width: 40px;
    height: 36px;
    border: 2px solid #AEB6BF;
    background: #D4E6F1;
    text-align: center;
    color: #AEB6BF;
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap {
    width: 30%;
    margin:0 auto;
}

html {
    font-family: 'Dosis', sans-serif;
    line-height: 1.6;
    color: #666;
}



h4 {
    margin-bottom: 500px;
    margin-top: -50px;
    width: 20%;
    height: 5px;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    padding: 1.5rem 2rem;
    background: url(https://cdna.artstation.com/p/assets/images/images/017/168/420/large/emrullah-cita-ghibli-clouds.jpg?1554902207);
    background-position: center;
    font-size: 1.3rem;
    color: #ffffff;
    text-shadow: #000000;
    position: absolute;
    top: 63%;
    border-radius: 12px 12px 0 0;
    left: 38%;
}

h5 {
    margin-top: -50px;
    background: #F2F4F4;
    width: 20%;
    height: 290px;
    text-align: justify;
    font-family: 'Dosis', sans-serif;
    padding: 1.5rem 2rem;
    font-size: 1rem;
    position: absolute;
    top: 70%;
    left: 38%;
    overflow: hidden;
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    border-radius: 0 0 12px 12px;

}

The absolute position property is not all bad though, for example, if you have a position:relative; parent element to anchor it in place, it’ll work just fine on all devices. You’ll usually run into display issues when the parent for the absolute element is the <body> element, because the size of the body is based on the viewer’s viewport. In your case, margin:0 auto; was the best method of centering your header and wrap.

For some more centering methods, check out this guide:

P.S.
Love Ghibli movies btw

1 Like

Thank you so much for the detailed answer, it solved all the issues I had! I’ll remember it for the next time I write some css!

P.S.
Love the Genki study resources

1 Like