I am trying to make a simple, standalone page with menus that populate the text box (the one with "Left 1"). The text in the box is way to small on mobile and on desktop computers.
https://i.sstatic.net/PX3tB.png
I am trying to make this text box legible but can't find a way to. I tried adding code to override the User agent but it didn't work - ideally I would want to do this inline.
https://i.sstatic.net/fjanv.png
Here's an anonymized codepen because I don't want to share the whole project publicly
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css-ta-mere.css" />
<title>martians on earts?</title>
<script src="html2canvas-example-master/html2canvas.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
</div>
<span style="color:#FFFFFF;"><h1 style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;">
<style>
.button {
background-color: #ff7676;
border: none;
color: white;
padding: 8px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.button:hover {
background-color: #7d7d7d;
}
@font-face {
font-family: Metropolis-Thin;
src: url(fonts/Metropolis-Thin.otf);
}
html,
body {
/* height: 100%;
width: 100%;
overflow: auto; */
/* pointer-events: none; */
background-color: black;
/* margin: 0; */
font-family: Metropolis-Thin;
/* overscroll-behavior: contain; */
}
a:link {
color: deeppink;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: coral;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: wheat;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: darkturquoise;
background-color: transparent;
text-decoration: underline;
}
.override {
style:font-size: 25px; !important;
}
</style>
<table width="800" border="0" align="center">
<tr>
<span style="color:#FFFFFF;"><span style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;"><span style="font-size:72px;"><td colspan="2" align="center">bleep bloop<br />
<br />
</td></span></span></span></span>
</tr>
<tr>
<td align="center">LEFT
<br/>
<input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;">
<br/>
<select id="leftSelect" style="font-size:22px">
<option value="l1" selected>Flow</option>
</select>
</td>
<td align="center">RIGHT
<br/>
<input type="text" id="rightLabel" value="Right 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;" class="override";>
<br/>
<select id="rightSelect" style="font-size:22px">
<option value="r1" selected>Flow</option>
</select>
<br/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="pandabear" class="button" style="h1">BUTTON</button>
</td>
</tr>
</table>
</body>
</html>