I am trying to build a website according to the "Holy Grail Layout" and I cannot get it to-CodePudding

I am building a website using the Holy Grail Layout and while it looks fine currently on my laptop and desktop computers, it looks terrible on my phone and does not resize correctly at all. I cannot even see half of the page despite having a media query to try and address this as well as using dynamically sized HTML elements in the rest of my CSS. Here is my code, I am not sure what my issue is currently as my media query doesn't seem to do anything.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// rot13
var rot13 = function() {
    var the_text = document.getElementById("main_text").value;
    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0)   (letter.toLowerCase() <= 'm' ? 13 : -13)));
    document.getElementById("output_text").innerHTML=the_text;
};
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre Baskerville&family=ZCOOL QingKe HuangYou&display=swap');

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
    html, body {
        aspect-ratio: 1024/768;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color:seashell;
  padding: 10px;
}

.grid-container > div {
  background-color: rgb(57, 61, 66, 0.4);
  text-align: center;
  padding: 20px 0;
}

.plaintext-form {
    flex-flow:row wrap;
    align-content:center;
    text-align: justify;
    justify-content: center;
    margin: 2%;
    padding: 2%;
    width: 80%;
    height: 80%;
    font-family: 'Libre Baskerville', sans-serif;
}

ul {
    padding-top: 5px;
    padding-right: 30px;
    position: relative;
    justify-self: center;
    text-align: center;
    align-self: center;
    flex-flow: column wrap;
    align-content: center;
    width: auto;
    margin:0 auto;
}

li {
    display: block;
    margin: 20px;
    padding: 15px;
    height: 100%;
    font-size: 21px;
}

a {
    color:slateblue;
}

p {
    background-color: rgb(57, 61, 66, 0.4);
    height: 200px;
    width: auto;
    margin: 0 auto;
    padding: 20px;
    text-align:justify;
    color:gainsboro;
    font-family: 'Libre Baskerville', sans-serif;
}

footer {
    flex-flow:row wrap;
    align-content:center;
    text-align: center;
    justify-content: center;
    margin: 2%;
    padding: 2%;
}
</style>
<title>ROT13 Cipher Machine</title>
</head>
<body>
<div >
  <div >
    <h1 >ROT13 Cipher Machine</h1>
  </div>
  <div >
    <div >
        <header role="navigation">
            <nav >
                <ul id="site-links">
                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
                </ul>
            </nav>
        </header>
    </div>
  </div>
  <div >
        <form id="input_text">
            Plaintext/Ciphertext: <input  type="text" placeholder="Type" id="main_text"><br><br>
            <input type="button" onclick="rot13()" value="Submit">
        </form>
  </div>  
  <div >
        <h4>Output:</h4>
        <p id="output_text"></p>
  </div>
  <hr>
  <div >
    <section >
        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
        <br><br>
        <code>
        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
        </code>
        <br><br>
        Try it out yourself for some simple text obfuscation!
    </section>
  </div>
</div>

</body>
</html>

I personally prefer flexboxes over CSS grid and find the grid to be terribly confusing. Maybe I am using it wrong, but I have to use both for my assignment.

Edit: I added a 600px breakpoint and it still cuts off over half the screen, this can be seen in the screenshot below.

phone screenshot

I am so tired of making sites that should fit with responsive design practices and then seeing them never work for me. I have media queries, I have dynamic sizing with %'s, I have a combo of a grid and flexboxes. Nothing about that should cause it to cut half my site off on mobile screens and I cannot understand what would be the cause at this point. Everything I look up indicates these are the things I should be doing to make it responsive yet it never works for me.

CodePudding user response：

Your media query only has one break point at 800px;

@media screen and (max-width: 800px) {
    html, body {
        aspect-ratio: 1024/768;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

You would need to add another break point for cell phone screens such as

@media screen and (max-width: 600px) {
    html, body {
        ...
    }
}

Cell phone screen size break points can be anywhere between 400 to 600.