How do I position these parts?

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi Everybody,

example.png

JavaScript:
<!--This section is a security stage: Vistor will see two randomly generated numbers
between 1 and 25 and be asked to input the sum of those two numbers-->
<div class="row">
    <div class="col-md-3 col-sm-6 spread">
        <h4>Question:</h4>
    </div>
    <div class="col-md-3 col-sm-6 displayBox" id="numericDisplay"></div>
    <script>
        var firstNumb = Math.floor(Math.random() * 25) + 1;
        var secondNumb = Math.floor(Math.random() * 25) + 1;
        var secretNumber = firstNumb + secondNumb;
        var display1 = document.getElementById("numericDisplay");
        display1.innerHTML = "<h5>"+firstNumb+" + "+secondNumb+"</h5>";
     </script>
    <div class="col-md-3 col-sm-6 spread">
        <h4>Answer:</h4>
    </div>
    <div class="col-md-3 col-sm-6">
        <input type="number" class="form-control" id="nEntry" name="nEntry" size="1" min="2" max="50" required="required">
    </div>
</div>
How do I adjust the "numericDisplay" to be closer to the Question label?
How do I adjust the "input type="number" to be closer to the Answer label?
I have no idea what attribute to play with.
 

Attachments

  • Screenshot 2024-01-06 070438.png
    Screenshot 2024-01-06 070438.png
    6.5 KB · Views: 10
Joined
Jul 4, 2023
Messages
376
Reaction score
42
Did you try like that ... col-md-2 ?
HTML:
 <div class="col-md-2 col-sm-6 spread">
    <h4>Question:</h4>
  </div>

  <!-- ... the rest of the code ... -->

  <div class="col-md-2 col-sm-6 spread">
    <h4>Answer:</h4>
  </div>
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi VBService,
I did try several different md-? but that attempt did not align the column elements the way I need.

I'll keep digging at it, and post the evenyual solution here.

Thanks Again ...
 
Joined
Jul 4, 2023
Messages
376
Reaction score
42
Did you try this way ...?
[ working code on-line ]
CSS:
.row .spread {
  display: flex;
  gap: 1rem;
}
HTML:
<div class="row">
  <div class="col-md-4 col-sm-6 spread">
    <h4>Question:</h4>
    <span class="displayBox" id="numericDisplay"></span>
  </div>

  <script>
    var firstNumb = Math.floor(Math.random() * 25) + 1;
    var secondNumb = Math.floor(Math.random() * 25) + 1;
    var secretNumber = firstNumb + secondNumb;
    var display1 = document.getElementById("numericDisplay");
    display1.innerHTML = "<h5>"+firstNumb+" + "+secondNumb+"</h5>";
  </script>
  <div class="col-md-4 col-sm-6 spread">
    <h4>Answer:</h4>
    <input type="number" class="form-control" id="nEntry" name="nEntry" size="1" min="2" max="50" required="required">
  </div>
</div>
 
Joined
Jul 4, 2023
Messages
376
Reaction score
42
I missed it in the post above because you have it written in javascript code:
JavaScript:
display1.innerHTML = "<h5>"+firstNumb+" + "+secondNumb+"</h5>";
and that causes <h5> to be inside <span> in my entry and this is incorrect, check why.

I changed it to <div> ;)
[ working code on-line ]
HTML:
  <div class="col-md-4 col-sm-6 spread">
    <h4>Question:</h4>
    <div class="displayBox" id="numericDisplay"></div>
  </div>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,794
Messages
2,569,641
Members
45,355
Latest member
SJLChristi

Latest Threads

Top