<div class="content-block">
    <div class="col-md-12">
        <h1><?php echo $page->title() ?></h1>
        <p class="lead">An online metronome, implemented using the Web Audio API</p>
        <p>Click the button, or press the space bar, to start/stop the metronome</p>
    </div>
    <div class="row">
        <div class="metronome col-md-6 col-sm-8 col-xs-12">
            <div class="col-md-4">
                <input id="metronome-on-off" type="button" name="OFF-ON" class="metronome-button">
                <label for="metronome-on-off">OFF/ON</label>
            </div>
            <div class="col-md-4">
                <label for="bpm-control">BPM: 120</label>
                <input id="bpm-control" type="range" name="BPM" min="20" max="300" value="120">
            </div>
            <div class="col-md-4">
                <label for="accent-control">ACCENT: 4 beats</label>
                <input id="accent-control" type="range" name="ACCENT" min="1" max="16" value="4">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>Alas this doesn't seem to work on IOS...</p>
        </div>
    </div>
</div>

<div class="content-block">
    <div class="row">
        <div class="col-md-12">
            <h1><?php echo $page->title() ?></h1>
            <p class="lead">An online metronome, implemented using the Web Audio API</p>
            <p>Click the button, or press the space bar, to start/stop the metronome</p>
        </div>
    </div>
    <div class="row">
        <div class="metronome col-md-6 col-sm-8 col-xs-12">
            <div class="col-md-4">
                <input id="metronome-on-off" type="button" name="OFF-ON" class="metronome-button">
                <label for="metronome-on-off">OFF/ON</label>
            </div>
            <div class="col-md-4">
                <label for="bpm-control">BPM: 120</label>
                <input id="bpm-control" type="range" name="BPM" min="20" max="300" value="120">
            </div>
            <div class="col-md-4">
                <label for="accent-control">ACCENT: 4 beats</label>
                <input id="accent-control" type="range" name="ACCENT" min="1" max="16" value="4">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>Alas this doesn't seem to work on IOS...</p>
        </div>
    </div>
</div>

Fix layout on tablet - IOS warning now appears below metronome always
Fix layout on tablet - IOS warning now appears below metronome always
