parker/pkrm.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make contact form look better on mobile

Browse Source
This commit is contained in:
Parker M. 2023-10-17 13:42:42 -05:00
parent ef924e201e
commit ca87cb1480
No known key found for this signature in database
GPG Key ID: 95CD2E0C7E329F2A
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
contact/index.html
View File

@ -75,7 +75,7 @@
/* "Back Home" media query for mobile */
@media only screen and (max-width: 600px) {
#back-home {
font-size: 3.125vw;
font-size: 7vw;
padding-top: 4.167vw;
width: 90%;
display: flex;
@ -95,7 +95,7 @@
@media only screen and (max-width: 600px) {
.container {
position: absolute;
top: 60%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@ -107,6 +107,13 @@
margin: 0.521vw;
}
/* Attention media query for mobile */
@media only screen and (max-width: 600px) {
#attention, #attention a {
font-size: 5vw;
}
}
#pgp-key, #contact-email {
color: #fff;
text-decoration: underline;
@ -144,7 +151,8 @@
@media only screen and (max-width: 600px) {
form input, form textarea, form button {
width: 70vw;
font-size: 1.563vw;
font-size: 7vw;
margin: 5px;
}
form button {
@ -159,6 +167,13 @@
text-align: center;
visibility: hidden;
}
/* Response media query for mobile */
@media only screen and (max-width: 600px) {
.response {
font-size: 3.125vw;
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>

6
index.html
View File

@ -1,9 +1,3 @@
<!-- REMINDER/TODO
Optimization for tablets and possibly other strange resolution/aspect ratio devices has not been done yet.
-->
<!DOCTYPE html>
<html lang="en">
<head>