mobile sizing
This commit is contained in:
parent
f9398dd251
commit
c9806e4458
2 changed files with 27 additions and 14 deletions
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue