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

micaelagimenez · 2020-08-17T18:28:49Z

micaelagimenez
Aug 17, 2020

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">
&lt;/div&gt;
&lt;div class="wrap"&gt;
    &lt;form action='/' method="POST"&gt;
        {% csrf_token %}
        &lt;div class="search"&gt;


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

                &lt;i class="fa fa-search" style="font-size:24px"&gt;&lt;/i&gt;
            &lt;/button&gt;

        &lt;/div&gt;


    &lt;/form&gt;
&lt;/div&gt;

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

    &lt;/ul&gt;
    {% endfor %}

    {% endif %}
&lt;/div&gt;

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

Answered by SethClydesdale

Aug 17, 2020

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

View full answer

SethClydesdale · 2020-08-17T19:31:57Z

SethClydesdale
Aug 17, 2020

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:

CSS-Tricks – 2 Sep 14

Centering in CSS: A Complete Guide | CSS-Tricks

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to

P.S.
Love Ghibli movies btw

0 replies

micaelagimenez · 2020-08-17T20:21:32Z

micaelagimenez
Aug 17, 2020
Author

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

0 replies

denskarlet · 2022-12-28T23:32:29Z

denskarlet
Dec 28, 2022

Yeah sure, f*ck off, spamming on github of all places ffs. Happy holidays everyone<3

…

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

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

{{title}}

Replies: 4 comments

{{title}}

{{title}}

{{title}}

Select a reply

GitHub Community

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

micaelagimenez Aug 17, 2020

Replies: 4 comments

SethClydesdale Aug 17, 2020

Centering in CSS: A Complete Guide | CSS-Tricks

micaelagimenez Aug 17, 2020 Author

denskarlet Dec 28, 2022

micaelagimenez
Aug 17, 2020

SethClydesdale
Aug 17, 2020

micaelagimenez
Aug 17, 2020
Author

denskarlet
Dec 28, 2022