Merge pull request #7 from toxinu/toxinu/mobile-margin-fix

Small fixes on mobile
This commit is contained in:
wkdonc 2021-10-10 01:30:50 +01:00 committed by GitHub
commit e57c18a4d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 6 deletions

View File

@ -150,6 +150,7 @@ body, input {
#answer:focus { #answer:focus {
outline-width: 0; outline-width: 0;
outline: none;
} }
.correct, .correct,
@ -192,7 +193,11 @@ body, input {
} }
input#numQuestions { input#numQuestions {
width: 60px; width: 100%;
}
select#questionFocus {
width: 100%;
} }
div.options ul { div.options ul {

View File

@ -25,19 +25,19 @@
<dl class="questionOptions mx-auto mb-0"> <dl class="questionOptions mx-auto mb-0">
<div class="form-group"> <div class="form-group">
<dt> <dt>
<label for="numQuestions" class="col-form-label">Number of Questions</label> <label for="numQuestions" class="col-form-label mr-2">Number of Questions</label>
</dt> </dt>
<dd> <dd>
<input class="mb-2 ml-2 form-control" style="width: 100%" type="number" placeholder="Questions" <input class="mb-2 form-control" type="number" placeholder="Questions"
aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10"> aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
</dd> </dd>
</div> </div>
<div class="form-group"> <div class="form-group">
<dt> <dt>
<label for="questionFocus" class="col-form-label">Question Focus</label> <label for="questionFocus" class="col-form-label mr-2">Question Focus</label>
</dt> </dt>
<dd> <dd>
<select id="questionFocus" class="form-control ml-2" aria-label="Question Focus"> <select id="questionFocus" class="form-control" aria-label="Question Focus">
<option value="none">None</option> <option value="none">None</option>
<option value="politeness">Politeness</option> <option value="politeness">Politeness</option>
<option value="negative">Negative</option> <option value="negative">Negative</option>
@ -233,7 +233,7 @@
<div id="inputArea" class="row"> <div id="inputArea" class="row">
<div class="col-12"> <div class="col-12">
<form action="javascript:processAnswer()"> <form action="javascript:processAnswer()">
<input placeholder="答え" autocomplete="off" id="answer" aria-label="答え"> <input placeholder="答え" autocomplete="off" autocapitalize="off" id="answer" aria-label="答え">
</form> </form>
</div> </div>
</div> </div>