commit 9832323576a82adda6c978dff20867eef68f4dbc (patch)
parent eeb5b4951be8ae7ae6288c6ced065cbc84e47be9
Author: Alex Karle <alex@karle.co>
Date: Sun, 22 Dec 2019 00:19:17 -0500
style: found solution to mobile text size
I finally found the solution to the proper mobile text zooming! The
solution was to use the "meta viewport" tag, which seems to detect the
small device and scale up the font. After scouring the CSS docs, the
solution was an HTML tag all along... go figure!
More on this here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Diffstat:
3 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>alex.karle.co</title>
<link rel="stylesheet" type="text/css" href="style.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
diff --git a/style.css b/style.css
@@ -1,8 +1,8 @@
body {
background-color: #F5F5F5;
font-family: "Courier New", monospace;
- margin-left: 40px;
- margin-right: 40px;
+ margin-left: 20px;
+ margin-right: 20px;
font-size: 1em;
}
@@ -19,6 +19,7 @@ body {
#nav {
text-align: center;
+ margin-bottom: 20px;
}
#nav > a {
diff --git a/thoughts.html b/thoughts.html
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>alex.karle.co</title>
<link rel="stylesheet" type="text/css" href="style.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
