filifa
/
mcalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adapt for small screens

This commit is contained in:
filifa 2025-12-11 23:49:34 -05:00
parent becee9632f
commit dacf8caecf
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -8,12 +8,14 @@
</head> </head>
<body> <body>
<div id="calculator"> <div id="calculator">
<label for="expr">Expression</label> <div id="input-row">
<input id="expr" required type="text" /> <label for="expr">Expression</label>
<input id="expr" required type="text" />
<div id="modulus-row"> <div id="modulus-box">
<label for="modulus">mod</label> <label id="modulus-label" for="modulus">mod</label>
<input id="modulus" required type="number" min="1" step="1" /> <input id="modulus" required type="number" min="1" step="1" />
</div>
</div> </div>
<output id="result" for="expr modulus"></output> <output id="result" for="expr modulus"></output>

27
styles.css
View File

@ -7,13 +7,32 @@ label[for="expr"] {
display: none; display: none;
} }
#expr { #input-row {
grid-column: 1 / 5; grid-column: 1 / 5;
display: flex;
flex-flow: wrap;
} }
#modulus-row { #expr {
grid-column: 1 / 5; flex: 4 auto;
text-align: right; min-width: 0;
}
#modulus-box {
flex: auto;
display: flex;
flex-flow: wrap;
justify-content: end;
min-width: 0;
}
#modulus-label {
flex: initial;
}
#modulus {
flex: auto;
min-width: 0;
} }
#result { #result {