mobile sizing

This commit is contained in:
Artemis 2025-01-23 21:58:40 +01:00
parent f9398dd251
commit c9806e4458
2 changed files with 27 additions and 14 deletions

View file

@ -41,7 +41,8 @@
}
body {
margin-bottom: 2em;
margin: 0 auto 2em auto;
max-width: 700px;
}
ul,
@ -256,4 +257,20 @@ input#ident {
.profile h2 {
font-size: 2em;
}
@media screen and (max-width: 700px) {
div.dual-fields {
flex-direction: column;
}
.dual-fields>*:first-child,
.dual-fields>*:last-child {
margin-right: 0;
margin-left: 0;
}
.dual-fields>*:not(:first-child) {
margin-top: 1em;
}
}

View file

@ -24,20 +24,11 @@
To that end, here's a few free ones you may also pick from.
</p>
<div class="split bordered raised">
<div class="dual-fields">
<div>
<p><label for="ident">Enter its ID</label></p>
<input type="text" inputmode="numeric" pattern="\d{6}" id="ident" name="ident" required size="6"
placeholder="000000" />
</div>
<div>
<p><label for="microchip_id">If it's microchipped,<br />you may enter the chip's ID</label></p>
<input type="text" pattern="(0x)?[a-fA-F0-9]+" id="microchip_id" name="microchip_id"
placeholder="A hexadecimal ID">
</div>
</div>
<div class="dual-fields bordered raised">
<div>
<p><label for="ident">Enter its ID</label></p>
<input type="text" inputmode="numeric" pattern="\d{6}" id="ident" name="ident" required size="6"
placeholder="000000" />
<p>Or pick one of those pre-generated ones</p>
<div id="pregen_ids">
@ -46,6 +37,11 @@
{% endfor %}
</div>
</div>
<div>
<p><label for="microchip_id">If it's microchipped,<br />you may enter the chip's ID</label></p>
<input type="text" pattern="(0x)?[a-fA-F0-9]+" id="microchip_id" name="microchip_id"
placeholder="A hexadecimal ID">
</div>
</div>
</section>