Initial state: https://i.sstatic.net/zZGXz.png
Final state: https://i.sstatic.net/JDeId.png
I am currently working on a 27' monitor, but my teacher will view the website on a 15-inch screen where the second image is what they'll see. How can I prevent overlapping and maintain proper positioning and size?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="parallax.min.js"></script>
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gaming.html">Gaming</a></li>
<li><a href="office.html">Office</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="checkout.html">Checkout</a></li>
</div>
</div>
</header>
<body>
<div class="container">
<div id="info"></div>
<div class="center">
<div class="logo">
<img src="logoreal2.png"/>
</div>
<div class="text">
<h1>Contact Us</h1>
<h4>- Socials -</h4>
<div id="links">
<a id="facebook" href="https://www.facebook.com/jared.huynh.1">Facebook</a>
<a id="instagram" href="https://www.instagram.com/jarednhu/">Instagram</a>
<a id="twitter" href="https://twitter.com/JaredWorkshop">Twitter</a>
</div>
<h4>- Support -</h4>
<div id="links2">
<a id="aa" href="https://mail.google.com/mail/u/0/#inbox?compose=jrjtXDzFhFXBrtwSfQzLJRrTmwBtfcnPVWKLhHzlGhTRbTKwsKbzRgrczFglKlXLmDLQtQCW" target="_blank">Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="efa58e9d8a8b9c98809d849c87809faf88828e8683c18c8082">[email protected]</a></a>
<a id="bb" href="#">Phone: 0426710063</a>
<a id="cc" href="https://www.google.com/maps/place/PLE+Computers+Wangara/@-31.7873489,115.8205448,17z/data=!3m1!4b1!4m5!3m4!1s0x2a32ad058339f89d:0xeb20a17d59f97d22!8m2!3d-31.7873535!4d115.8227335" target="_blank">Address: 1/46 Buckingham Dr, Wangara WA 6065</a>
</div>
</div>
</div>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
user-select: none;
}
body {
background: #eee;
}
.text {
font-family: 'Roboto', sans-serif;
font-size: 50px;
color: black;
position: absolute;
}
a {
display: block;
text-decoration: none;
color: black;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 70px;
margin: 0;
}
h4 {
font-family: 'Montserrat', sans-serif;
font-size: 40px;
margin: 0;
margin-top:10px;
}
.hovered a {
color: #ffffff66;
}
.hovered {
color: #fff;
}
.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
}
canvas {
width: 100%;
height: 100%;
}
#info {
position: fixed;
padding: 20px;
}
#facebook:hover {
color: #FFFFFF;
}
#instagram:hover {
color: #ff0066;
}
#twitter:hover {
color: #fff;
}
.center .logo {
text-align: center;
position: absolute;
padding-bottom: 0;
margin-top: 30%;
background-color: transparent;
}
.center .logo img {
width: 1200px;
}
.text{
transform: translate(0,-30%);
background-color: transparent;
}
#facebook {
font-size: 2rem;
}
#instagram {
font-size: 2rem;
}
#twitter {
font-size: 2rem;
}
#links a{
display: inline-block;
white-space: nowrap;
padding: 20px;
line-height: 2px;
}
#links2 a{
line-height: 2px;
white-space: nowrap;
padding: 20px;
}
#aa{
font-size: 2rem;
}
#bb{
font-size: 2rem;
}
#cc{
font-size: 2rem;
}
#aa:hover{
color: #fe9500;
transition: 0.5s;
}
#bb:hover{
color: #fe9500;
transition: 0.5s;
}
#cc:hover{
color: #fe9500;
transition: 0.5s;
}