how to fix css height auto property not working - html

Question

I am now working on a website for my discord bot i have 2 container in my website (container and container2) i set my height of my container and container2 to auto but there is a problem my container 2 height will work on mobile device (ie, css breakpoint with 600px) but now working on devices with breakpoint of 1024px the container is small in devices with 1024 breakpoints
my style.css
* {
margin: 0;
padding: 0;
}
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#700&family=Quicksand:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css?family=Archivo:400,700");
#import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
#import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&display=swap");
/*Desktop*/
:root{
--normal: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);
--darks: linear-gradient(315deg, #000106 0%, #000106 74%);
--text-theme: black;
}
.dark-theme{
--normal: linear-gradient(315deg, #000106 0%, #000106 74%);
--text-theme: white;
}
#media screen and (min-width: 1024px) and (max-width: 1300px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: var(--text-theme);
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
display: none;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.trust {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
color: var(--text-theme);
text-align: center;
}
.info .quote {
font-size: 36px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
bottom: 100px;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 36px;
bottom: 50px;
position: relative;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
bottom: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
}
.f_txt {
font-size: 26px;
color: var(--text-theme);
}
.more_txt {
font-size: 26px;
color: var(--text-theme);
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: 4500px;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
float: right;
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 605px;
height: 300px;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
float: left;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 805px;
height: 300px;
}
.jokepara {
font-size: 15px;
}
.roast {
float: right;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 705px;
height: 300px;
}
.roastpara {
font-size: 15px;
}
.animegif {
float: left;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 605px;
height: 300px;
}
.animapara {
font-size: 15px;
}
.meme {
float: right;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 705px;
height: 400px;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 40%;
float: left;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 705px;
height: 200px;
}
.factpara {
font-size: 15px;
}
}
.anime {
font-size: 5vw;
cursor: cell;
line-height: 5.5vw;
}
#icon{
cursor: pointer;
width: 20px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.anime {
transition: color 3s;
transition-delay: 1s;
letter-spacing: -0.2vw;
}
.anime span:hover {
transition: color 0s;
}
.anime span:nth-child(1n):hover {
color: #9875e0;
}
.anime span:nth-child(2n):hover {
color: #53fbdd;
}
.anime span:nth-child(3n):hover {
color: #00a4dd;
}
.hideme {
opacity: 0;
}
/*Mobile*/
#media screen and (max-width: 600px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: var(--text-theme);
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 10px 12px;
text-decoration: none;
font-size: 15px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.title .img {
display: none;
}
.title {
font-size: 42px;
position: relative;
right: 95px;
top: 100px;
text-align: center;
color: var(--text-theme);
}
.trust {
font-size: 16px;
font-family: "Quicksand", sans-serif;
position: relative;
top: 180px;
text-align: center;
color: var(--text-theme);
}
.info .quote {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 26px;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
top: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
font-size: 17px;
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
.anime {
font-size: 8vw;
cursor: cell;
line-height: 5.5vw;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: auto;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 95%;
height: 80%;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 95%;
height: 80%;
}
.jokepara {
font-size: 15px;
}
.roast {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 95%;
height: 80%;
}
.roastpara {
font-size: 15px;
}
.animegif {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 95%;
height: 80%;
}
.animapara {
font-size: 15px;
}
.meme {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 95%;
height: 80%;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 95%;
height: 80%;
}
.factpara {
font-size: 15px;
}
}
/*Tablets*/
#media screen and (min-width: 768px) and (max-width: 1023px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: black;
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
color: var(--text-theme);
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.title .img {
display: none;
}
.title {
font-size: 42px;
position: relative;
right: 95px;
top: 100px;
text-align: center;
color: var(--text-theme);
}
.trust {
font-size: 16px;
font-family: "Quicksand", sans-serif;
position: relative;
top: 180px;
color: var(--text-theme);
text-align: center;
}
.info .quote {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 26px;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
top: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
.anime {
font-size: 8vw;
cursor: cell;
line-height: 5.5vw;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: auto;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 95%;
height: 80%;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 95%;
height: 80%;
}
.jokepara {
font-size: 15px;
}
.roast {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 95%;
height: 80%;
}
.roastpara {
font-size: 15px;
}
.animegif {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 95%;
height: 80%;
}
.animapara {
font-size: 15px;
}
.meme {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 95%;
height: 80%;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 95%;
height: 80%;
}
.factpara {
font-size: 15px;
}
}
dont read the whole style.css just check the one with breakpoint of 1024
my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="btn.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1592285788506158"
crossorigin="anonymous"></script>
<meta name="author" content="CaptainBeast#1394">
<meta name="description" content="Beast Bot.beast bot is a moderation and fun bot for your discord server make your discord server a fun and safe place">
<meta name="keywords" content="Discord bot, bot,beast bot,server,discord server">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="google-site-verification" content="VbhoNStFz2rn8d52JV_RzL_0uAG7thWedllzb16m-wA" />
<link rel="icon" href="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
</script>
<div class="topnav">
<div class="hover-underline-animation">
<a class="active" href="index.html">Home</a>
Contact
About Us
Status
<img src="images/moon.png" id="icon">
</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Beast Bot</title>
</head>
<body>
<div class="container">
<div class="title">
<p class="infotit">Hover the title</p>
<P class="anime"><span>Beast Bot :)</span></P>
<div class="hideme">
<img class="img" src="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png">
</div>
</div>
<div class="hide me">
<h1 class="trust">Trusted by 10,000+ people</h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="hideme">
<div class="info">
<div class="hideme">
<p class="quote">A perfect moderation and fun bot<br>for your Discord Server</p>
</div>
<div class="btn">
<button onclick="location.href='https://discord.com/api/oauth2/authorize?client_id=876824416531664896&permissions=536870907895&scope=bot'" class="bttn-slant bttn-lg bttn-royal">Invite</button>
</div>
<br>
<BR>
<br>
<p class="quoto">Beast Bot is trusted by more than 10,000 people</p>
<div class="h11">
<h1>Features</h1>
<br>
<h3 class="h33">Moderation</h3>
<img src="images/features.png" class="features_img">
<p class="f_txt">A perfect moderation bot for your discord server with commands like ban,kick,mute,lock</p>
<br>
<br>
<h3 class="muchmore_txt">Much More</h3>
<img src="images/muchmore.png" class="muchmore">
<P class="more_txt">Many more fun and anime commands like animegif,meme,cute and many more</P>
</div>
</div>
</div>
<br>
<br>
</div>
<!--Updates-->
<div class="container2">
<div class="hideme">
<div class="title2">
<h1>The bot that makes your server a safe place</h1>
</div>
</div>
<div class="minecraft">
<p class="hideme" >Get status of any minecraft servers</p>
<div class="hideme">
<img class="mcimg" src="images/mcstats.PNG">
<div class="mcpara">
<p class="hideme">Beast bot gives you the ability to know the status of any minecraft server</p>
</div>
</div>
</div>
<div class="joke">
<p class="hideme">Have a nice laugh everyday</p>
<div class="hideme">
<img class="jokeimg" src="images/joke.PNG">
</div>
<div class="jokepara">
<p class="hideme">Have a good laugh every day with a Beast Bot use $joke for joke </p>
</div>
</div>
<div class="roast">
<p class="hideme">Roast your friends</p>
<div class="hideme">
<img class="roastimg" src="images/roast.PNG">
</div>
<div class="roastpara">
<p class="hideme">Hmm.Want a revenge on your firend do $roast #user to take a revenge on him</p>
</div>
</div>
<div class="animegif">
<p class="hideme">Sad anime gif</p>
<div class="hideme">
<img class="animeimg" src="https://media.tenor.com/images/8fef3aa41f9d27021e5f4105a7bd6768/tenor.gif">
</div>
<div class="animapara">
<P class="hideme">Sad :( emotional anime gif :( do $animegif</P>
</div>
</div>
<div class="meme">
<p class="hideme">Memes</p>
<div class="hideme">
<img class="memeimg" src="images/meme.jpeg">
</div>
<div class="memepara">
<P class="hideme">Cool memes for your discord server</P>
</div>
</div>
<div class="fact">
<p class="hideme">Random Facts</p>
<div class="hideme">
<img class="factimg" src="images/fact.PNG">
</div>
<div class="factpara">
<p class="hideme">Some cool random fact for you do $fact</p>
</div>
</div>
</div>
<script src="script.js"></script>
<script>
var icon = document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "images/sun.png";
}else{
icon.src = "images/moon.png"
}
}
</script>
</body>
<script src="cookies.js"></script>
<div class="footer">
<br>
<br>
<footer><P><i class="fa fa-github" ></i> <i class="fa fa-copyright"></i> CaptainBeast#1394 - 2021</P></footer>
Join our official server
</div>
</html>
Here is a image of the problem - container2 is the thing with the text "The bot that makes your server a safe place"