the element labelled "gib" is supposed to sit at the corner of the white container, and does so on my screen (at 1920 x 1080) but at other resolution, the element goes off to the left of the page. everything is positioned correctly, except for the "gib" element. it's supposed to look like this
i tried setting it to "margin: auto", and changing the position property, but nothing seems to work. is there any way i can fix this?
i apologize if my code is messy- i am a beginner compared to a lot of the people on stackoverflow, and i am coding this for a personal website i am making as a hobby. though any help is appreciated - thanks in advance
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/lq9k9g.gif">
</head>
<style>
body {
background: url(.gif);
background-size: cover;
letter-spacing: 1.5;
}
#main
{
width: 300px;
height: 300px;
margin: auto;
margin-top: 100px;
padding: 10px;
background-color: aliceblue;
box-shadow: 0px 0px 30px 30px aliceblue;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
}
#gib {
width: 200px;
margin: auto;
margin-top: -150px;
margin-left: 380px;
position: fixed;
}
#gib img {
width: 100%;
height: auto;
}
</style>
<div id="main">
<img src=".gif" class="center">
</div>
<div id="gib"><img src=".png"></div>
</body>
</html>
the element labelled "gib" is supposed to sit at the corner of the white container, and does so on my screen (at 1920 x 1080) but at other resolution, the element goes off to the left of the page. everything is positioned correctly, except for the "gib" element. it's supposed to look like this
i tried setting it to "margin: auto", and changing the position property, but nothing seems to work. is there any way i can fix this?
i apologize if my code is messy- i am a beginner compared to a lot of the people on stackoverflow, and i am coding this for a personal website i am making as a hobby. though any help is appreciated - thanks in advance
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://files.catbox.moe/lq9k9g.gif">
</head>
<style>
body {
background: url(https://tombrot.neocities./graphics/BGs/cemetery.gif);
background-size: cover;
letter-spacing: 1.5;
}
#main
{
width: 300px;
height: 300px;
margin: auto;
margin-top: 100px;
padding: 10px;
background-color: aliceblue;
box-shadow: 0px 0px 30px 30px aliceblue;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
}
#gib {
width: 200px;
margin: auto;
margin-top: -150px;
margin-left: 380px;
position: fixed;
}
#gib img {
width: 100%;
height: auto;
}
</style>
<div id="main">
<img src="https://tombrot.neocities./graphics/tomb.gif" class="center">
</div>
<div id="gib"><img src="https://tombrot.neocities./graphics/gib%20pagedoll.png"></div>
</body>
</html>
- 3 Please CLEAN your messy code. It is invalid HTML. Remove the </div> after the style tag and move all body tags our of the head into the body and close the head after the style tag – mplungjan Commented Mar 25 at 14:00
2 Answers
Reset to default 0Why is there margin-left:300px on #gib styles. On a screen of less than 300 pixels, this can make #gib disappear
Instead of Absolute length units like px, use Relative length units such as
%percentage of its parentvwviewport widthvhviewport heightdvwdynamic viewport widthdvhdynamic viewport heightemparent element's font-sizeremthe root element's font-size
For example, 10% percent of screen equals to different widths based on the screen resolution. 10% of 1920pixel width is 192px, while that of 1440pixel width becomes 144px.
Also, you can use media-queries and container queries.