У меня проблема с изменением размера. Когда я изменяю размер браузера, все внутри него также меняется, включая текст и форму внизу. Как я могу сохранить позицию, чтобы ничего не менялось при изменении размера? Единственное, что я понял, была позиция: абсолютная; с классом изображения, и это не движется, но все остальное делает.
https://codepen.io/CaptainMattyP/pen/mdJRKpo?
<html>
<main>
<body>
<nav id="navbar">
<ul>
<li><a href="">About</a></li>
<li><a href="">Skills</a></li>
<li><a href="" class="projects">Projects</a></li>
<li><a href="#footer">Contact</a></li>
<li><a href="https://www.freecodecamp.org/fccef50e112-0b35-4195-878f-e76ad4931e3d" id="profile-link" target="_blank">FCC Profile</a></li>
</ul>
</nav>
<div id="welcome-section">
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="projects">
<div class="project-tile">
<a href="https://codepen.io/CaptainMattyP/pen/yLNgPwR">Survery Project </a>
</div>
</section>
<section id="footer">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
<div id="footer-info1">
Matthew Paciello <br><br>
561-305-5761<br>
Boca Raton, FL<br>
mpaciell@gmail.com
</div>
<div id="copyright">
@Matthew Paciello
</div>
</section>
</body>
</main
body {
height: 800px;
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
}
h1 {
text-align: center;
padding: 25vh 0px 0px 920px;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a, .white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
text-align: right;
}
li {
color: white;
display: inline;
padding: 30px;
}
#welcome {
padding: 50vh 0px 0px 70vw;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 0px 0px 0px 1250px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
border-top: solid;
bottom: 0;
border-width: 1px;
}
#footer-info1 {
color: white;
padding: 80px 0px 0px 10vw;
}
#copyright {
color: white;
padding: 0px 0px 0px 48vw;
}
#contact-info {
float: right;
padding: 20px 10vw 0px 20px;
}
.block {
display: block;
}
#projects {
margin: 0px 0px 0px 77vw;
}
@media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}```