javascript - HTML & CSS How do I make it so an entire page is visible to everyone without having to zoom out

Question

So I've created a portal page for a website and I'm having trouble making it so users don't have to zoom out to 80% to see everything. Here is a link to the website: https://www.xenofactions.com/

And the code for this portal page I will show you here now. I've tried fiddling around with heights and widths etc but I still can't figure it out. I'm new to HTML & CSS any help would be appreciated thank you in the future! I will now put the block of code below belonging to this portal page.

[Google by default is zoomed in at 100% so when one user opened the website they said I think the website is broken? So I want it so everyone can view it without having to zoom out] Picture doesn't let me upload picture on here for some odd reason ----> https://imgur.com/a/MmKn5lz

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Barlow:300,400,500,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.6.0/sweetalert2.min.css">
<link rel="icon" href="">
<title>XenoFactions | Welcome</title>
<style>{literal}
html {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

body {
    background: url("https://i.imgur.com/6eYoGo2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.portal-content li {
    list-style: none;
}

.portal-content {
    text-align: center;
    margin-top: 50px;
}
.portal-content .logo {
    margin-bottom: 10px !important;
    max-width: 485px;
    margin: 0 auto;
}
@media (max-width: 700px) {
   /* PUT CSS HERE TO ALTER WEBSITE TO SINGLE COLUMN */
}

.portal-content .logo img {
    max-width: 100%;
    animation-name: pulse_animation;
    animation-duration: 6500ms;
    transform-origin:70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-left: 20px;
}
@keyframes pulse_animation {
    0% { transform: scale(1); }
    10% { transform: scale(1.05); }
    20% { transform: scale(1); }
    30% { transform: scale(1.05); }
    40% { transform: scale(1); }
    50% { transform: scale(1.05); }
    60% { transform: scale(1); }
    70% { transform: scale(1.05); }
    80% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
.portal-content .links > a {
    font-family: 'Barlow', sans-serif;
    display: inline-block;
    text-decoration: none;
    transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -webkit-transition: all .10s ease-in-out;
}
.portal-content .link-item:hover {
transform:scale(1.05);
}
.portal-content .link-item {
    transform:scale(1.0);
    display: block;
    min-width: 170px;
    margin: 0px 15px;
    transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -webkit-transition: all .10s ease-in-out;
}
.link-item:Hover .icon {
    bottom:3px;
    transform: rotate(3deg);
}
.link-item .icon {
    transform: rotate(0deg);
    bottom:0;
    position: relative;
    height: 348px;
    width: 217px;
    margin: 0 auto;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 15px;
    transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -webkit-transition: all .10s ease-in-out;
}

.link-item.home .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073251486760983/forums.png);
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073251486760983/forums.png);
}

.link-item.vote .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073137485840389/vote.png);
}

.link-item.store .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073101460832260/store.png);
}
.link-item.bans .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518072933537546250/bans.png);
}
.link-item .text {
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 800;
    color: #ed9b10 !important;
    text-shadow: 0px 0px 15px black, -3px 3px 0px black;
    margin-top: -10px;
    letter-spacing: -1px;
}
div#players > span {
    display: inline-block;
    background-color:rgba(0,0,0,0.5);
    border-bottom:3px solid #7360FF;
    padding: 14px 20px;
    font-size: 18px;
    font-family: 'Barlow', sans-serif;
    color: white;
    margin-bottom: 50px;
    margin-top: 50px;
}
span#live{
     font-weight: 700;   
    }
div#players > span span {
    color: white !important;
    display: inline-block;
}
.portal-content {
    position: relative;
}
.clouds {
    -webkit-animation: clouds linear 90s infinite;
    animation: clouds linear 90s infinite;
    background-image: url(f.png);
    background-position: 0 100px;
    background-repeat: repeat-x;
    height: 100%;
    min-width: 2710px;
    position: absolute;
    width: 200%;
    background-repeat-y: no-repeat;
    margin-left: 8px;
}

@keyframes clouds{
  from   {transform:translateX(-1366px)}
  to {transform:translateX(0)}
}
</style>{/literal}
</head>
<body>
<div class="clouds"></div>
<div class="portal-content">
    <div class="logo">
        <li><img src="https://cdn.discordapp.com/attachments/514244374453026816/514902610390548520/xenonetwork.png"></li>
    </div>
    <div id="players">
        <span class="playerCount"><b><span class="live"><i class="fa fa-cog fa-spin"></i></span></b> Server IP :
        <span><strong>play.xenofactions.com</strong></span >
        </span>
        
    </div>
    <div class="links">
        <a href="http://xenofactions.com/index.php?route=/forum">
            <div class="link-item home">
                <div class="icon"></div>
            </div>
        </a>
        <a href="https://xenofactions.com/index.php?route=/vote/">
            <div class="link-item vote">
                <div class="icon"></div>
            </div>
        </a>
        <a href="http://store.xenofactions.com/">
            <div class="link-item store">
                <div class="icon"></div>
            </div>
        </a>
        <a href="https://xenofactions.com/punishments/index.php">
            <div class="link-item bans">
                <div class="icon"></div>
            </div>
        </a>
    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert2/6.6.0/sweetalert2.js"></script>
<script src="/resources/js/clipboard.min.js"></script>
<script src="//mcapi.us/scripts/minecraft.js"></script>
{literal}<script>
    function playerUpdate() {        $.ajax({            headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},            url: "https://mcapi.ca/query/play.xenofactions.com/players",            dataType: "text",            success: function(data) {                var json = $.parseJSON(data);                if(json.status) {                    $(".live").html(json.players.online);                } else {                    $(".playerCount").html("SERVER OFFLINE");                }            }        })    }
    playerUpdate();
    setInterval(playerUpdate, 10000);
</script>{/literal} 


  [1]: https://i.stack.imgur.com/XzX0K.jpg
  [2]: https://i.stack.imgur.com/5Q10B.jpg

question from:https://stackoverflow.com/questions/65912567/html-css-how-do-i-make-it-so-an-entire-page-is-visible-to-everyone-without-hav

Answer 1

You need to add this to the <head> of your html:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this the browsers won't understand very well the scale of your site.

That said, your front page scales well horizontally, but not so well vertically. This is rather normal, as most sites will require you to scroll down to get all content on a page. But you can try to adapt your content to the vertical axis by using percentages and/or vh (viewport height) units in your css to indicate the vertical distance between elements, padding, margin, etc.

You could do something like this with your different CSS classes: Replace your fixed pixel values with fluid % values:

div#players > span {
  display: inline-block;
  background-color: rgba(0,0,0,0.5);
  border-bottom: 3px solid #7360FF;
  padding: 4% 8%;
  font-size: 18px;
  font-family: 'Barlow', sans-serif;
  color: white;
  margin: 10% 0;
}

Just an example, but if you add enough percentages your page will eventually ble completely flexible and adapt better to smaller and larger screens.