Popular Releases
Popular Libraries
New Libraries
Top Authors
Trending Kits
Trending Discussions
Learning
No Popular Releases are available at this moment for Quantum Computing
No Trending Libraries are available at this moment for Quantum Computing
No Trending Libraries are available at this moment for Quantum Computing
No Top Authors are available at this moment for Quantum Computing.
No Trending Kits are available at this moment for Quantum Computing
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:30I 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.
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:33Your media query only has one break point at 800px;
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
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.
Community Discussions contain sources that include Stack Exchange Network
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:30I 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.
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:33Your media query only has one break point at 800px;
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
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.