kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Quantum Computing open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Quantum Computing

No Popular Releases are available at this moment for Quantum Computing

Popular Libraries in Quantum Computing

No Trending Libraries are available at this moment for Quantum Computing

Trending New libraries in Quantum Computing

No Trending Libraries are available at this moment for Quantum Computing

Top Authors in Quantum Computing

No Top Authors are available at this moment for Quantum Computing.

Trending Kits in Quantum Computing

No Trending Kits are available at this moment for Quantum Computing

Trending Discussions on Quantum Computing

    I am trying to build a website according to the "Holy Grail Layout" and I cannot get it to look good on my phone
    How does Elasticsearch aggregate or weight scores from two sub queries ("bool query" and "decay function")
    Cannot create Q# projects
    Quantum computing vs traditional base10 systems
    Distance Estimation Using Quantum Computer
    In quantum computing is there a preference to usage of little endian or big endian?
    how to only replace \n which has some char after that
    Curated WebAssembly CDN
    Polynomial Equations in Q# E=MC^2
    Fastest way for boolean matrix computations

QUESTION

I am trying to build a website according to the "Holy Grail Layout" and I cannot get it to look good on my phone

Asked 2022-Mar-12 at 22:30

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.

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<script>
8const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
9// rot13
10var rot13 = function() {
11    var the_text = document.getElementById("main_text").value;
12    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)));
13    document.getElementById("output_text").innerHTML=the_text;
14};
15</script>
16<style>
17@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');
18
19html {
20    width: 100%;
21    height: 100%;
22    overflow: hidden;
23}
24
25/* Use a media query to add a breakpoint at 800px: */
26@media screen and (max-width: 800px) {
27    html, body {
28        aspect-ratio: 1024/768;
29        width: 100%;
30        height: 100%;
31        overflow: hidden;
32    }
33}
34
35.item1 { grid-area: header; }
36.item2 { grid-area: menu; }
37.item3 { grid-area: main; }
38.item4 { grid-area: right; }
39.item5 { grid-area: footer; }
40
41.grid-container {
42  display: grid;
43  grid-template-areas:
44    'header header header header header header'
45    'menu main main main right right'
46    'menu footer footer footer footer footer';
47  gap: 10px;
48  background-color:seashell;
49  padding: 10px;
50}
51
52.grid-container > div {
53  background-color: rgb(57, 61, 66, 0.4);
54  text-align: center;
55  padding: 20px 0;
56}
57
58.plaintext-form {
59    flex-flow:row wrap;
60    align-content:center;
61    text-align: justify;
62    justify-content: center;
63    margin: 2%;
64    padding: 2%;
65    width: 80%;
66    height: 80%;
67    font-family: 'Libre Baskerville', sans-serif;
68}
69
70ul {
71    padding-top: 5px;
72    padding-right: 30px;
73    position: relative;
74    justify-self: center;
75    text-align: center;
76    align-self: center;
77    flex-flow: column wrap;
78    align-content: center;
79    width: auto;
80    margin:0 auto;
81}
82
83li {
84    display: block;
85    margin: 20px;
86    padding: 15px;
87    height: 100%;
88    font-size: 21px;
89}
90
91a {
92    color:slateblue;
93}
94
95p {
96    background-color: rgb(57, 61, 66, 0.4);
97    height: 200px;
98    width: auto;
99    margin: 0 auto;
100    padding: 20px;
101    text-align:justify;
102    color:gainsboro;
103    font-family: 'Libre Baskerville', sans-serif;
104}
105
106footer {
107    flex-flow:row wrap;
108    align-content:center;
109    text-align: center;
110    justify-content: center;
111    margin: 2%;
112    padding: 2%;
113}
114</style>
115<title>ROT13 Cipher Machine</title>
116</head>
117<body>
118<div class="grid-container">
119  <div class="item1">
120    <h1 class="page_title">ROT13 Cipher Machine</h1>
121  </div>
122  <div class="item2">
123    <div class="navbar">
124        <header role="navigation">
125            <nav class="site-nav">
126                <ul id="site-links">
127                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
128                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
129                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
130                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
131                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
132                </ul>
133            </nav>
134        </header>
135    </div>
136  </div>
137  <div class="item3">
138        <form id="input_text">
139            Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
140            <input type="button" onclick="rot13()" value="Submit">
141        </form>
142  </div>  
143  <div class="item4">
144        <h4>Output:</h4>
145        <p id="output_text"></p>
146  </div>
147  <hr>
148  <div class="item5">
149    <section class="rot13-about">
150        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
151        <br><br>
152        <code>
153        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
154        </code>
155        <br><br>
156        Try it out yourself for some simple text obfuscation!
157    </section>
158  </div>
159</div>
160
161</body>
162</html>
163

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.

ANSWER

Answered 2022-Mar-12 at 21:33

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

copy icondownload icon

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<script>
8const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
9// rot13
10var rot13 = function() {
11    var the_text = document.getElementById("main_text").value;
12    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)));
13    document.getElementById("output_text").innerHTML=the_text;
14};
15</script>
16<style>
17@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');
18
19html {
20    width: 100%;
21    height: 100%;
22    overflow: hidden;
23}
24
25/* Use a media query to add a breakpoint at 800px: */
26@media screen and (max-width: 800px) {
27    html, body {
28        aspect-ratio: 1024/768;
29        width: 100%;
30        height: 100%;
31        overflow: hidden;
32    }
33}
34
35.item1 { grid-area: header; }
36.item2 { grid-area: menu; }
37.item3 { grid-area: main; }
38.item4 { grid-area: right; }
39.item5 { grid-area: footer; }
40
41.grid-container {
42  display: grid;
43  grid-template-areas:
44    'header header header header header header'
45    'menu main main main right right'
46    'menu footer footer footer footer footer';
47  gap: 10px;
48  background-color:seashell;
49  padding: 10px;
50}
51
52.grid-container > div {
53  background-color: rgb(57, 61, 66, 0.4);
54  text-align: center;
55  padding: 20px 0;
56}
57
58.plaintext-form {
59    flex-flow:row wrap;
60    align-content:center;
61    text-align: justify;
62    justify-content: center;
63    margin: 2%;
64    padding: 2%;
65    width: 80%;
66    height: 80%;
67    font-family: 'Libre Baskerville', sans-serif;
68}
69
70ul {
71    padding-top: 5px;
72    padding-right: 30px;
73    position: relative;
74    justify-self: center;
75    text-align: center;
76    align-self: center;
77    flex-flow: column wrap;
78    align-content: center;
79    width: auto;
80    margin:0 auto;
81}
82
83li {
84    display: block;
85    margin: 20px;
86    padding: 15px;
87    height: 100%;
88    font-size: 21px;
89}
90
91a {
92    color:slateblue;
93}
94
95p {
96    background-color: rgb(57, 61, 66, 0.4);
97    height: 200px;
98    width: auto;
99    margin: 0 auto;
100    padding: 20px;
101    text-align:justify;
102    color:gainsboro;
103    font-family: 'Libre Baskerville', sans-serif;
104}
105
106footer {
107    flex-flow:row wrap;
108    align-content:center;
109    text-align: center;
110    justify-content: center;
111    margin: 2%;
112    padding: 2%;
113}
114</style>
115<title>ROT13 Cipher Machine</title>
116</head>
117<body>
118<div class="grid-container">
119  <div class="item1">
120    <h1 class="page_title">ROT13 Cipher Machine</h1>
121  </div>
122  <div class="item2">
123    <div class="navbar">
124        <header role="navigation">
125            <nav class="site-nav">
126                <ul id="site-links">
127                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
128                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
129                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
130                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
131                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
132                </ul>
133            </nav>
134        </header>
135    </div>
136  </div>
137  <div class="item3">
138        <form id="input_text">
139            Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
140            <input type="button" onclick="rot13()" value="Submit">
141        </form>
142  </div>  
143  <div class="item4">
144        <h4>Output:</h4>
145        <p id="output_text"></p>
146  </div>
147  <hr>
148  <div class="item5">
149    <section class="rot13-about">
150        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
151        <br><br>
152        <code>
153        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
154        </code>
155        <br><br>
156        Try it out yourself for some simple text obfuscation!
157    </section>
158  </div>
159</div>
160
161</body>
162</html>
163@media screen and (max-width: 800px) {
164    html, body {
165        aspect-ratio: 1024/768;
166        width: 100%;
167        height: 100%;
168        overflow: hidden;
169    }
170}
171

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

copy icondownload icon

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<script>
8const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
9// rot13
10var rot13 = function() {
11    var the_text = document.getElementById("main_text").value;
12    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)));
13    document.getElementById("output_text").innerHTML=the_text;
14};
15</script>
16<style>
17@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');
18
19html {
20    width: 100%;
21    height: 100%;
22    overflow: hidden;
23}
24
25/* Use a media query to add a breakpoint at 800px: */
26@media screen and (max-width: 800px) {
27    html, body {
28        aspect-ratio: 1024/768;
29        width: 100%;
30        height: 100%;
31        overflow: hidden;
32    }
33}
34
35.item1 { grid-area: header; }
36.item2 { grid-area: menu; }
37.item3 { grid-area: main; }
38.item4 { grid-area: right; }
39.item5 { grid-area: footer; }
40
41.grid-container {
42  display: grid;
43  grid-template-areas:
44    'header header header header header header'
45    'menu main main main right right'
46    'menu footer footer footer footer footer';
47  gap: 10px;
48  background-color:seashell;
49  padding: 10px;
50}
51
52.grid-container > div {
53  background-color: rgb(57, 61, 66, 0.4);
54  text-align: center;
55  padding: 20px 0;
56}
57
58.plaintext-form {
59    flex-flow:row wrap;
60    align-content:center;
61    text-align: justify;
62    justify-content: center;
63    margin: 2%;
64    padding: 2%;
65    width: 80%;
66    height: 80%;
67    font-family: 'Libre Baskerville', sans-serif;
68}
69
70ul {
71    padding-top: 5px;
72    padding-right: 30px;
73    position: relative;
74    justify-self: center;
75    text-align: center;
76    align-self: center;
77    flex-flow: column wrap;
78    align-content: center;
79    width: auto;
80    margin:0 auto;
81}
82
83li {
84    display: block;
85    margin: 20px;
86    padding: 15px;
87    height: 100%;
88    font-size: 21px;
89}
90
91a {
92    color:slateblue;
93}
94
95p {
96    background-color: rgb(57, 61, 66, 0.4);
97    height: 200px;
98    width: auto;
99    margin: 0 auto;
100    padding: 20px;
101    text-align:justify;
102    color:gainsboro;
103    font-family: 'Libre Baskerville', sans-serif;
104}
105
106footer {
107    flex-flow:row wrap;
108    align-content:center;
109    text-align: center;
110    justify-content: center;
111    margin: 2%;
112    padding: 2%;
113}
114</style>
115<title>ROT13 Cipher Machine</title>
116</head>
117<body>
118<div class="grid-container">
119  <div class="item1">
120    <h1 class="page_title">ROT13 Cipher Machine</h1>
121  </div>
122  <div class="item2">
123    <div class="navbar">
124        <header role="navigation">
125            <nav class="site-nav">
126                <ul id="site-links">
127                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
128                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
129                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
130                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
131                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
132                </ul>
133            </nav>
134        </header>
135    </div>
136  </div>
137  <div class="item3">
138        <form id="input_text">
139            Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
140            <input type="button" onclick="rot13()" value="Submit">
141        </form>
142  </div>  
143  <div class="item4">
144        <h4>Output:</h4>
145        <p id="output_text"></p>
146  </div>
147  <hr>
148  <div class="item5">
149    <section class="rot13-about">
150        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
151        <br><br>
152        <code>
153        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
154        </code>
155        <br><br>
156        Try it out yourself for some simple text obfuscation!
157    </section>
158  </div>
159</div>
160
161</body>
162</html>
163@media screen and (max-width: 800px) {
164    html, body {
165        aspect-ratio: 1024/768;
166        width: 100%;
167        height: 100%;
168        overflow: hidden;
169    }
170}
171@media screen and (max-width: 600px) {
172    html, body {
173        ...
174    }
175}
176

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

Source https://stackoverflow.com/questions/71452947

Community Discussions contain sources that include Stack Exchange Network

    I am trying to build a website according to the "Holy Grail Layout" and I cannot get it to look good on my phone
    How does Elasticsearch aggregate or weight scores from two sub queries ("bool query" and "decay function")
    Cannot create Q# projects
    Quantum computing vs traditional base10 systems
    Distance Estimation Using Quantum Computer
    In quantum computing is there a preference to usage of little endian or big endian?
    how to only replace \n which has some char after that
    Curated WebAssembly CDN
    Polynomial Equations in Q# E=MC^2
    Fastest way for boolean matrix computations

QUESTION

I am trying to build a website according to the "Holy Grail Layout" and I cannot get it to look good on my phone

Asked 2022-Mar-12 at 22:30

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.

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<script>
8const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
9// rot13
10var rot13 = function() {
11    var the_text = document.getElementById("main_text").value;
12    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)));
13    document.getElementById("output_text").innerHTML=the_text;
14};
15</script>
16<style>
17@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');
18
19html {
20    width: 100%;
21    height: 100%;
22    overflow: hidden;
23}
24
25/* Use a media query to add a breakpoint at 800px: */
26@media screen and (max-width: 800px) {
27    html, body {
28        aspect-ratio: 1024/768;
29        width: 100%;
30        height: 100%;
31        overflow: hidden;
32    }
33}
34
35.item1 { grid-area: header; }
36.item2 { grid-area: menu; }
37.item3 { grid-area: main; }
38.item4 { grid-area: right; }
39.item5 { grid-area: footer; }
40
41.grid-container {
42  display: grid;
43  grid-template-areas:
44    'header header header header header header'
45    'menu main main main right right'
46    'menu footer footer footer footer footer';
47  gap: 10px;
48  background-color:seashell;
49  padding: 10px;
50}
51
52.grid-container > div {
53  background-color: rgb(57, 61, 66, 0.4);
54  text-align: center;
55  padding: 20px 0;
56}
57
58.plaintext-form {
59    flex-flow:row wrap;
60    align-content:center;
61    text-align: justify;
62    justify-content: center;
63    margin: 2%;
64    padding: 2%;
65    width: 80%;
66    height: 80%;
67    font-family: 'Libre Baskerville', sans-serif;
68}
69
70ul {
71    padding-top: 5px;
72    padding-right: 30px;
73    position: relative;
74    justify-self: center;
75    text-align: center;
76    align-self: center;
77    flex-flow: column wrap;
78    align-content: center;
79    width: auto;
80    margin:0 auto;
81}
82
83li {
84    display: block;
85    margin: 20px;
86    padding: 15px;
87    height: 100%;
88    font-size: 21px;
89}
90
91a {
92    color:slateblue;
93}
94
95p {
96    background-color: rgb(57, 61, 66, 0.4);
97    height: 200px;
98    width: auto;
99    margin: 0 auto;
100    padding: 20px;
101    text-align:justify;
102    color:gainsboro;
103    font-family: 'Libre Baskerville', sans-serif;
104}
105
106footer {
107    flex-flow:row wrap;
108    align-content:center;
109    text-align: center;
110    justify-content: center;
111    margin: 2%;
112    padding: 2%;
113}
114</style>
115<title>ROT13 Cipher Machine</title>
116</head>
117<body>
118<div class="grid-container">
119  <div class="item1">
120    <h1 class="page_title">ROT13 Cipher Machine</h1>
121  </div>
122  <div class="item2">
123    <div class="navbar">
124        <header role="navigation">
125            <nav class="site-nav">
126                <ul id="site-links">
127                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
128                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
129                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
130                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
131                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
132                </ul>
133            </nav>
134        </header>
135    </div>
136  </div>
137  <div class="item3">
138        <form id="input_text">
139            Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
140            <input type="button" onclick="rot13()" value="Submit">
141        </form>
142  </div>  
143  <div class="item4">
144        <h4>Output:</h4>
145        <p id="output_text"></p>
146  </div>
147  <hr>
148  <div class="item5">
149    <section class="rot13-about">
150        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
151        <br><br>
152        <code>
153        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
154        </code>
155        <br><br>
156        Try it out yourself for some simple text obfuscation!
157    </section>
158  </div>
159</div>
160
161</body>
162</html>
163

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.

ANSWER

Answered 2022-Mar-12 at 21:33

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

copy icondownload icon

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<script>
8const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
9// rot13
10var rot13 = function() {
11    var the_text = document.getElementById("main_text").value;
12    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)));
13    document.getElementById("output_text").innerHTML=the_text;
14};
15</script>
16<style>
17@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');
18
19html {
20    width: 100%;
21    height: 100%;
22    overflow: hidden;
23}
24
25/* Use a media query to add a breakpoint at 800px: */
26@media screen and (max-width: 800px) {
27    html, body {
28        aspect-ratio: 1024/768;
29        width: 100%;
30        height: 100%;
31        overflow: hidden;
32    }
33}
34
35.item1 { grid-area: header; }
36.item2 { grid-area: menu; }
37.item3 { grid-area: main; }
38.item4 { grid-area: right; }
39.item5 { grid-area: footer; }
40
41.grid-container {
42  display: grid;
43  grid-template-areas:
44    'header header header header header header'
45    'menu main main main right right'
46    'menu footer footer footer footer footer';
47  gap: 10px;
48  background-color:seashell;
49  padding: 10px;
50}
51
52.grid-container > div {
53  background-color: rgb(57, 61, 66, 0.4);
54  text-align: center;
55  padding: 20px 0;
56}
57
58.plaintext-form {
59    flex-flow:row wrap;
60    align-content:center;
61    text-align: justify;
62    justify-content: center;
63    margin: 2%;
64    padding: 2%;
65    width: 80%;
66    height: 80%;
67    font-family: 'Libre Baskerville', sans-serif;
68}
69
70ul {
71    padding-top: 5px;
72    padding-right: 30px;
73    position: relative;
74    justify-self: center;
75    text-align: center;
76    align-self: center;
77    flex-flow: column wrap;
78    align-content: center;
79    width: auto;
80    margin:0 auto;
81}
82
83li {
84    display: block;
85    margin: 20px;
86    padding: 15px;
87    height: 100%;
88    font-size: 21px;
89}
90
91a {
92    color:slateblue;
93}
94
95p {
96    background-color: rgb(57, 61, 66, 0.4);
97    height: 200px;
98    width: auto;
99    margin: 0 auto;
100    padding: 20px;
101    text-align:justify;
102    color:gainsboro;
103    font-family: 'Libre Baskerville', sans-serif;
104}
105
106footer {
107    flex-flow:row wrap;
108    align-content:center;
109    text-align: center;
110    justify-content: center;
111    margin: 2%;
112    padding: 2%;
113}
114</style>
115<title>ROT13 Cipher Machine</title>
116</head>
117<body>
118<div class="grid-container">
119  <div class="item1">
120    <h1 class="page_title">ROT13 Cipher Machine</h1>
121  </div>
122  <div class="item2">
123    <div class="navbar">
124        <header role="navigation">
125            <nav class="site-nav">
126                <ul id="site-links">
127                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
128                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
129                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
130                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
131                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
132                </ul>
133            </nav>
134        </header>
135    </div>
136  </div>
137  <div class="item3">
138        <form id="input_text">
139            Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
140            <input type="button" onclick="rot13()" value="Submit">
141        </form>
142  </div>  
143  <div class="item4">
144        <h4>Output:</h4>
145        <p id="output_text"></p>
146  </div>
147  <hr>
148  <div class="item5">
149    <section class="rot13-about">
150        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
151        <br><br>
152        <code>
153        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
154        </code>
155        <br><br>
156        Try it out yourself for some simple text obfuscation!
157    </section>
158  </div>
159</div>
160
161</body>
162</html>
163@media screen and (max-width: 800px) {
164    html, body {
165        aspect-ratio: 1024/768;
166        width: 100%;
167        height: 100%;
168        overflow: hidden;
169    }
170}
171

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

copy icondownload icon

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<script>
8const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
9// rot13
10var rot13 = function() {
11    var the_text = document.getElementById("main_text").value;
12    the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)));
13    document.getElementById("output_text").innerHTML=the_text;
14};
15</script>
16<style>
17@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');
18
19html {
20    width: 100%;
21    height: 100%;
22    overflow: hidden;
23}
24
25/* Use a media query to add a breakpoint at 800px: */
26@media screen and (max-width: 800px) {
27    html, body {
28        aspect-ratio: 1024/768;
29        width: 100%;
30        height: 100%;
31        overflow: hidden;
32    }
33}
34
35.item1 { grid-area: header; }
36.item2 { grid-area: menu; }
37.item3 { grid-area: main; }
38.item4 { grid-area: right; }
39.item5 { grid-area: footer; }
40
41.grid-container {
42  display: grid;
43  grid-template-areas:
44    'header header header header header header'
45    'menu main main main right right'
46    'menu footer footer footer footer footer';
47  gap: 10px;
48  background-color:seashell;
49  padding: 10px;
50}
51
52.grid-container > div {
53  background-color: rgb(57, 61, 66, 0.4);
54  text-align: center;
55  padding: 20px 0;
56}
57
58.plaintext-form {
59    flex-flow:row wrap;
60    align-content:center;
61    text-align: justify;
62    justify-content: center;
63    margin: 2%;
64    padding: 2%;
65    width: 80%;
66    height: 80%;
67    font-family: 'Libre Baskerville', sans-serif;
68}
69
70ul {
71    padding-top: 5px;
72    padding-right: 30px;
73    position: relative;
74    justify-self: center;
75    text-align: center;
76    align-self: center;
77    flex-flow: column wrap;
78    align-content: center;
79    width: auto;
80    margin:0 auto;
81}
82
83li {
84    display: block;
85    margin: 20px;
86    padding: 15px;
87    height: 100%;
88    font-size: 21px;
89}
90
91a {
92    color:slateblue;
93}
94
95p {
96    background-color: rgb(57, 61, 66, 0.4);
97    height: 200px;
98    width: auto;
99    margin: 0 auto;
100    padding: 20px;
101    text-align:justify;
102    color:gainsboro;
103    font-family: 'Libre Baskerville', sans-serif;
104}
105
106footer {
107    flex-flow:row wrap;
108    align-content:center;
109    text-align: center;
110    justify-content: center;
111    margin: 2%;
112    padding: 2%;
113}
114</style>
115<title>ROT13 Cipher Machine</title>
116</head>
117<body>
118<div class="grid-container">
119  <div class="item1">
120    <h1 class="page_title">ROT13 Cipher Machine</h1>
121  </div>
122  <div class="item2">
123    <div class="navbar">
124        <header role="navigation">
125            <nav class="site-nav">
126                <ul id="site-links">
127                    <li id="homework"><a href="./cs212/homework/">Homework</a></li>
128                    <li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
129                    <!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
130                    <li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
131                    <li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
132                </ul>
133            </nav>
134        </header>
135    </div>
136  </div>
137  <div class="item3">
138        <form id="input_text">
139            Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
140            <input type="button" onclick="rot13()" value="Submit">
141        </form>
142  </div>  
143  <div class="item4">
144        <h4>Output:</h4>
145        <p id="output_text"></p>
146  </div>
147  <hr>
148  <div class="item5">
149    <section class="rot13-about">
150        The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
151        <br><br>
152        <code>
153        ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext 
154        </code>
155        <br><br>
156        Try it out yourself for some simple text obfuscation!
157    </section>
158  </div>
159</div>
160
161</body>
162</html>
163@media screen and (max-width: 800px) {
164    html, body {
165        aspect-ratio: 1024/768;
166        width: 100%;
167        height: 100%;
168        overflow: hidden;
169    }
170}
171@media screen and (max-width: 600px) {
172    html, body {
173        ...
174    }
175}
176

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

Source https://stackoverflow.com/questions/71452947