I am trying to get my page to be resposive to size on any platforms-CodePudding

this is my first post here. I am fairly new to coding. I am trying to get my page to be responsive and size according to the the device it is viewed on. Right now it is only appearing very small in the top right corner of any browser. Does anyone have any advice as to how I can adjust this.

Here is the code for my page.

Thank you for any help!

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="wdith=device-width, intital-scale=1"/>
 <link rel="icon" type="image/x-icon" href="img/ps-logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 
<title>ER</title>
<style type="text/css">
     #header{
    min-height: 100px;
  }

#body{
  min-height: 400px;
  margin-top: 3%;
}

body{
  min-height: 400px;
  /*background-color: #0d1121;*/
  background-color: #151922;
  color: white;
  font-family: 'Jost', sans-serif;
  margin: 50px;
 }

div{
  cursor:pointer;
}

.banner{
  display: inline-block;
}

/*Dots
.loading span{
  width: 25px;
  height: 25px;
  margin: 0 5px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  animation-name: dots;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; 
}

.loading span:nth-child(2){
  background-color: lightgray;
  animation-delay: 0.4s;
}

.loading span:nth-child(3){
  background-color: gray;
  animation-delay: 0.8s;
}

@keyframes dots{
  50%{
    opacity: 0;
    transform: scale(0.7) translateY(10px);
  }
}
*/

section{
  cursor: pointer;
}

img{
  max-width: 100%;
  height: auto;
  color: white;
}

h1{
  font-size: 30px;
}

.title{
  margin-top: -18px;
  font-size: 18px;
}

.inline-block{
  padding-top: 5px;
}

.phone{
  height: 50px;
  width: 50px;
}

.email{
  height: 50px;
  width: 50px;
}

.linkedin{
  height: 50px;
  width: 50px;
}

.web{
  height: 50px;
  width: 50px;
}

a{
  color: black;
  text-decoration: none;
}

a:hover{
  filter: contrast(50%);
  -webkit-filter: contrast(50%);
}

.link{
color: white;
}

.inline-block{
   display: inline-block;
   margin-top: -1px;
}

.icon:hover{
  filter: contrast(50%);
  -webkit-filter: contrast(50%);
}

/*landing page*/

.preload{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #151922;
  display: flex;
  justify-content: left;
  align-items: left;
  transition: opacity 0.5s ease;
  margin-top: 50px;
}

.airplane{
  height: 200px;
  animation: airplane 1s ease-in-out infinite alternate;
}

.preload h3{
  position: absolute;
  top: 60%;
  transform: translateY(-75%);
  color: white;
  font-size: 30px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  padding-top: -100px;
}

.preload-finish{
  opacity: 0;
  pointer-events: none;
}

@keyframes airplane{
  from{
    transform: translateY(0px);
  }
  to{
    transform: translateY(50px);
  }
}
</style>
</head>

<body>
    <!-- Preloader -->
    <section >
        <img  src="img/aeroplane-white.png" alt="airplane">
        <h3>You are arriving...</h3>

    <!-- Dots -->
    <div >
        <span></span>
        <span></span>
        <span></span>
    </div>
    </section>

<header id="header">
    <!-- Erjana's Headshot -->
        <p >
            <a  href="mailto:@.com">
                <img src="img/era.jpg" alt="headshot" width="100" height="132">
            </a>
        </p>

    <!-- PS Logo -->
        <p >
            <a href="https://#.com/" target="_blank">
                <img src="img/ps-logo-blue.jpeg" alt="https://#.com/" width="150" height="164">
            </a>
        </p>
    
</header>

<div id="body">
    <section>
        <h1>ER</h1>
        <p >Director of Human Resources</p>
        <a  href="tel: #">O: #</a> <br>
        <a  href="tel: #">C: #</a> <br>
        <a  href="mailto:@.com">@.com</a> <br>
        <a  href="https://#.com/" target="_blank">#.com</a>
    </section>

    <!-- Phone -->
    <section >
        <p >
            <a  href="tel: #">
                <img alt="Phone" src="img/call-white.png">
            </a>
        </p>

    <!-- Email -->
        <p >
            <a  href="mailto:@.com">
                <img alt="Email" src="img/email-white.png">
            </a>
        </p>

    <!-- LinkedIn -->
        <p >
            <a  href="https://www.linkedin.com/in/X/" target="_blank">
                <img alt="LinkedIn" src="img/linkedin-white.png">
            </a>
        </p>

    <!-- Website -->
        <p >
            <a  href="https://#.com/" target="_blank">
                <img alt="Website" src="img/web-white.png">
            </a>
        </p>
    </section>
</div>

<script src="./app.js"></script>
</body>

<footer>
    
</footer>

</html>

CodePudding user response：

Bootstrap is a front-end framework that fits your needs nicely. It implements a "Column" scaffolding block that orients elements differently depending on screen size.

CodePudding user response：

I see your problem, I think you should to use a media query for responsive all devices. Check it here my media query... it as simple just put your CSS here, which devices you want to change something.

/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {

/*     put your css */
}


/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {

  /*     put your css */
}

 
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {

  /*     put your css */
}

 
/* small mobile :320px. */
@media (max-width: 767px) {

 /*     put your css */
  
}

Hope it will help you :)