My website looks different on other resolutions

Question

So, I am using position:absolute to align elements on my website and it looks different on other resolutions. my current resolution is 1920x1080. I have another screen with 1366x768 resolution and it looks terrible on it. This is my first time of making proper website. Is there any other way to align elements to avoid this thing?

<html>
    <head>
     <style>
     body{
         background-color:gray;
         overflow:hidden;
         
         width:1366px;
    
    height:768px;
     }
     .logo{
         
     }
     .mountain{
         height:75px;
         position:absolute;
         left:15%;
         top: 2%;
         
     }
     .name{
        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; font-size: 300%; font-style: normal; font-variant: normal; font-weight: 400; line-height: 26.4px;
        position:absolute;
        top: 0%;
        left: 19.5%;
     }
     .navigation{
         position:relative;
         top: 6%;
         left: 50%;
     }
     .f{
         height:30px;
         width: 30px;
         border-style:solid;
         border-radius: 70px;
         border-width: 1.5px;
         border-color: white;
         top:0px;
         position:absolute;
         left:20%;
     }
     .t{
         height:30px;
         width: 30px;
         border-style:solid;
         border-radius: 70px;
         border-width: 1.5px;
         border-color: white;
         top:0px;
         position:absolute;
         left:23%;
     }
     .g{
         height:30px;
         width: 30px;
         border-style:solid;
         border-radius: 70px;
         border-width: 1.5px;
         border-color: white;
         top:0px;
         position:absolute;
         left:26%;
     }
     .social{
         display:inline-flexbox;
         position:relative;
         top: 30px;
         left:1000px;
     }
     .content{
        font-family: monospace; font-size: 500%; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px;        
        color:white;
        position:absolute;
        top: 30%;
        left: 37%;
     }
     .content1{
        font-family: monospace; font-size: 110%; font-style: normal; font-variant: normal; font-weight: 700; line-height: 200%;        
        color:white;
        position:absolute;
        top: 43%;
        left: 24%;

     }
     .button{
         height:50px;
         width:200px;
         border-style: solid;
         border-width: 2px;
         border-radius: 70px;
         border-color:white;
         position:absolute;
         top: 50%;
        left: 42%;
     }

     </style>
    </head>

    <body>
<div class="whole">
    <div class="logo">
     <img class="mountain" src="img/mountain.png">
     <p class="name" style="color:white;">EVEREST</p>
    </div>
    <div class="navigation">
        <a href="" style="text-decoration: none; color:white; margin: 20px 20px 20px 20px">Features</a>
        <a href="" style="text-decoration: none; color:white; margin: 20px 20px 20px 20px">Services</a>
        <a href="" style="text-decoration: none; color:white; margin: 20px 20px 20px 20px">Contact us</a>
    </div>
    <div class="social">
        <div class="f">
            <a href=""><img src="img/f.png" style="height:25px;"> </a> 
        </div>
        <div class="t">
            <a href="">  <img src="img/t.jpg" style="height:25px;"> </a> 
        </div>
        <div class="g"> 
            <a href="">   <img src="img/g.png" style="height:25px;"> </a> 
        </div>
    </div>
    <div class="content">
        <p> Hello World. </p>
    </div>
    <div class="content1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div class="button">
        <a  href="" style="color:white; font-size:20px; position: absolute; top: 15px; left: 30px; text-decoration: none;"> GET STARTED </a>
    </div>
</div>
    </body>
</html>

this is what is looks like on 1366x768

there are many answers for your problem, check viewport, bootstrap and media querys — xmaster, Nov 20 '19 at 12:54
You can make it *fluid*, *adaptive* or *responsive*, google those and you will find an ocean of knowledge — vsync, Nov 20 '19 at 12:56
Honestly, so many things: you have inline and css styles, you have a mix of percentage and pixels, you have a decimal on a pixel at one point and you have tried setting the dimensions of the body. — Edunikki, Nov 20 '19 at 12:58
I have voted to close this question because it's very vague -- there is a ton of answers (advice, really) on how to decouple layout from resolution, plus the question assumes only people with a screen access a website, etc. There will be no good answers to this question, only opinions. In fact, I already am looking at these below. — Armen Michaeli, Nov 20 '19 at 13:39

score 0 · Accepted Answer · edited Nov 20 '19 at 16:37

You need to do a responsive website using Media queries of a framework like Bootstrap using a grid.

Here an example of Media queries:

@media (min-width: 30em) and (orientation: landscape) { ... }

Here an example of the grid Bootstrap displaying 3 equals columns independent of the screen size:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

My website looks different on other resolutions

1 Answers1