Fix responsiveness on mobile

This commit is contained in:
alex 3
2023-06-19 15:55:33 -04:00
parent dce7268509
commit a2484a3d15
5 changed files with 19 additions and 13 deletions
+7 -3
View File
@@ -33,18 +33,20 @@ a:hover {
@media only screen and (max-width:700px) { @media only screen and (max-width:700px) {
#container { #container {
height:100vh; height:100vh;
padding-top:50px; padding-top:0;
} }
} }
#intro { #intro {
width:40%; /* width:40%; */
color:white; color:white;
text-align:center; text-align:center;
padding-top:50px;
} }
#navtype { #navtype {
color:white; color:white;
text-align: center;
} }
.card { .card {
@@ -95,6 +97,7 @@ a:hover {
#footer { #footer {
text-align:center; text-align:center;
padding-bottom:10px;
} }
#notice { #notice {
@@ -140,6 +143,7 @@ a:hover {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; /* height: 100vh; */
/* width:50vw; */
flex-direction: column; flex-direction: column;
} }
+2 -2
View File
@@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<div id="container" class="center"> <div id="container" class="center">
<div id="intro"> <div id="intro" style="white-space: nowrap; text-align:center;">
<h1>lets get in touch</h1> <h1>lets get in touch</h1>
<p>reach out to me below or via <a href="mailto:hello@thatalex.dev">hello@thatalex.dev</a></p> <p>reach out to me below or via <a href="mailto:hello@thatalex.dev">hello@thatalex.dev</a></p>
</div> </div>
@@ -49,7 +49,7 @@
<br /> <br />
<div id="footer"> <div id="footer">
<div id="socials"> <div id="socials">
<a href="https://twitter.com/zstreamss" target="_blank" rel="noreferrer"> <a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i> <i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a> </a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer"> <a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
+1 -1
View File
@@ -81,7 +81,7 @@
<div id="container"> <div id="container">
<h1 id="header">something's not quite right..</h1> <h1 id="header">something's not quite right..</h1>
<p class="error-message">that page doesn't exist. how'd you get here?<br /> <p class="error-message">that page doesn't exist. how'd you get here?<br />
<a href="#" onclick="history.back()">lets head back now.</a></p> <a href="#" onclick="history.back()" style="text-decoration:underline;">lets head back now.</a></p>
<div id="socials" class="error-message"> <div id="socials" class="error-message">
<a href="https://twitter.com/zstreamss" target="_blank" rel="noreferrer"> <a href="https://twitter.com/zstreamss" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter"></i> <i class="fa-brands fa-twitter"></i>
+2 -2
View File
@@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<div id="container" class="center"> <div id="container" class="center">
<div id="intro"> <div id="intro" style="width:50vw;">
<h1>hi, i'm alex!</h1> <h1>hi, i'm alex!</h1>
<p>i'm part-time QA Manual Testing + Automation at <a href="https://medal.tv">Medal.tv</a> and a full-time Node.js, Go and Kotlin geek</p> <p>i'm part-time QA Manual Testing + Automation at <a href="https://medal.tv">Medal.tv</a> and a full-time Node.js, Go and Kotlin geek</p>
</div> </div>
@@ -33,7 +33,7 @@
<br /> <br />
<div id="footer"> <div id="footer">
<div id="socials"> <div id="socials">
<a href="https://twitter.com/zstreamss" target="_blank" rel="noreferrer"> <a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i> <i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a> </a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer"> <a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
+7 -5
View File
@@ -12,7 +12,7 @@
<title>alex! - projects</title> <title>alex! - projects</title>
</head> </head>
<body> <body>
<div id="container" class="center"> <div id="container">
<div id="intro"> <div id="intro">
<h1>what do i work on?</h1> <h1>what do i work on?</h1>
<p>a lot of random stuff. i mean, like, a lot.</p> <p>a lot of random stuff. i mean, like, a lot.</p>
@@ -20,7 +20,7 @@
<br /> <br />
<div id="cards"> <div id="cards" class="center">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h1>pause!</h1> <h1>pause!</h1>
@@ -53,8 +53,10 @@
</div> </div>
<br /> <br />
<h1 style="color:white;">..and more!</h1> <span style="text-align:center;">
<p style="color:white">you can see all of my projects on my <a href="https://github.com/azpha" target="_blank">GitHub page</a></p> <h1 style="color:white;">..and more!</h1>
<p style="color:white">you can see all of my projects on my <a href="https://github.com/azpha" target="_blank">GitHub page</a></p>
</span>
<!-- br to space, fite me --> <!-- br to space, fite me -->
<br /> <br />
@@ -71,7 +73,7 @@
<br /> <br />
<div id="footer"> <div id="footer">
<div id="socials"> <div id="socials">
<a href="https://twitter.com/zstreamss" target="_blank" rel="noreferrer"> <a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i> <i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a> </a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer"> <a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">