So I am trying to edit a simple webpage that's giving me headaches. So on a simple pc, this webpage looks really nice, but on mobile it looks horrible. I tried editing it with some info I know from the internet, but nothing worked... I am really sorry that I'm posting this because probably it is a stupid question :( Here is what I am talking about:
PC

Phone

You can also check it by entering the website: https://lyrex.ro/
Also, here is the code

<style>
:root {
--header-background: linear-gradient(#212121 0,rgb(74 69 69 / 18%) 0%,#252323 90%);
}
#maintenance {
    background: url(https://i.imgur.com/Ik4qFXl.jpg)!important;
    width: 100%;
    height: 320px;
}

#maintenance:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px;
    background: var(--header-background);
}
.logo img {
    width: 600px;
    height:auto;
}
#maintenance .logo {
    height: 160px;
}
#particles-js {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}
.maintenance-data {
    text-align: center;
}
.maintenance-title {
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 2ch;
}.maintenance-mess {
    font-size: 25px;
    margin-top: 1.3ch;
    margin-bottom: 3ch;
}
button.ui.primary.button {
    margin-right: 20px;
}
.ui.buttons{
 margin-top: 3ch;
}
.ui.buttons.button:first-child {
    border-left: none;
    margin-left: 0;
    border-radius: .28571429rem;
}.ui.buttons .button:last-child {
    border-radius: .28571429rem;
}
.login-button {
    background: var(--panel-body);
    padding: 10px 18px;
    color: var(--main-color);
    margin-left: 30px;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
}
#preloader {
    z-index: -1;
}
</style>
    <div  id="maintenance">
    <div id="particles-js"></div>
    <div ><a href="https://lyrex.ro/discord"><img src="https://i.imgur.com/QghSfu2.png"></a></div>
    </div>
      <div >
        <h2 >{$MAINTENANCE_TITLE}</h2>
        <div >{$MAINTENANCE_MESSAGE}</div>
        <div >
          <button  onclick="window.location.reload()">{$RETRY}</button>
        </div>
        {if isset($LOGIN)}
          <a  href="{$LOGIN_LINK}">{$LOGIN}</a>
        {/if}
      </div>
    </div>
 <script type="text/javascript">
{literal}
        particlesJS("particles-js", {
            "particles": {
                "number": {
                    "value": 100,
                    "density": {
                        "enable": true,
                        "value_area": 2000
                    }
                },
                "color": {
                    "value": "#dc3545"
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 4
                    },
                    "image": {
                        "src": "img/github.svg",
                        "width": 100,
                        "height": 100
                    }
                },
                "opacity": {
                    "value": 0.5,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 0.5,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 8,
                    "random": true,
                    "anim": {
                        "enable": true,
                        "speed": 2,
                        "size_min": 0,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": false,
                    "distance": 500,
                    "color": "#ffffff",
                    "opacity": 0.4,
                    "width": 2
                },
                "move": {
                    "enable": true,
                    "speed": 2.8914764163227265,
                    "direction": "top",
                    "random": true,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": false,
                        "mode": "bubble"
                    },
                    "onclick": {
                        "enable": false,
                        "mode": "repulse"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 400,
                        "line_linked": {
                            "opacity": 0.5
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 4,
                        "duration": 0.3,
                        "opacity": 1,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });
        var count_particles, stats, update;
{/literal}
</script>    
  </body>
</html>```

CodePudding user response：

for responsive viewpoint please add these to your code

 .logo img {
    width: 100%;
    height: auto;
    margin: auto;
    max-width: 600px;
}

Add margin:auto; and max-width:600px; to the logo img