CODEWITHSUNDEEP
htmlcsszoomingoverlapping
Toknn
Toknn

Reputation: 85

Zoom in without messing up layout?

Before zoom: enter image description here

After zoom: enter image description here

From what I noticed, I am working on a 27' monitor display and my teacher will be viewing my website on a 15 inch, and the second image is typically what the teacher will be seeing. How do I prevent the overlapping from occurring, and keep it to its own position and proportional 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">H o m e</a></li>
          <li><a href="gaming.html">G a m i n g</a></li>
          <li><a href="office.html">O f f i c e</a></li>
          <li><a href="contacts.html">C o n t a c t s</a></li>
          <li><a href="checkout.html">C h e c k o u t</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: [email protected]</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;
}

Upvotes: 1

Views: 265

Answers (1)

Toknn
Toknn

Reputation: 85

I fixed it by removing position:absolute; in .center .logo{} and removed width: 1200px; under .center .logo img{} . Then I cut and pasted the whole

      <div class="logo">
        <img src="logoreal2.png"/>
      </div>

and placed it all inside <div class="text"> which was the same div as the text below (I'm moving the logo). I later added a negative top margin to move it down from the top of the screen.

Final HTML product looked like this:

<!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">H o m e</a></li>
          <li><a href="gaming.html">G a m i n g</a></li>
          <li><a href="office.html">O f f i c e</a></li>
          <li><a href="contacts.html">C o n t a c t s</a></li>
          <li><a href="checkout.html">C h e c k o u t</a></li>
      </div>
    </div>

  </header>
  <body>
    <div class="container">


        <div id="info"></div>

        <div class="center">

            <div class="text">
              <div class="logo">
                <img src="logoreal2.png"/>
              </div>
                <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: [email protected]</a>
                    <a id="bb" href="#">Phone: 0426710064</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>

Upvotes: 1

Related Questions