Skip to content

Commit

Permalink
Fixing responsive width breakpoint for smaller browsers
Browse files Browse the repository at this point in the history
  • Loading branch information
@KCarlile
KCarlile committed Jun 13, 2024
1 parent f0c7752 commit 2048419
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions docs/examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ <h2 class="border-bottom border-1 mb-4">Preface - Setup</h2>
<!-- BEGIN: example 1 -->
<h2 class="border-bottom border-1 mb-4">Example 1 - Basic fretboard</h2>
<div class="row mb-5">
<div class="col-6">
<div class="col-md-6 mb-4">
<div id="diagram-1"></div>
</div>
<div class="col-6">
<div class="col-md-6 mb-4">
<p>This example demonstrates the most basic usage with a vertical fretboard and no additional options.</p>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj1 = new GuitarDiagramsJS();
Expand All @@ -49,10 +49,10 @@ <h5>Code</h5>
<!-- BEGIN: example 2 -->
<h2 class="border-bottom border-1 mb-4">Example 2 - Adding markers</h2>
<div class="row mb-5">
<div class="col-6">
<div class="col-md-6 mb-4">
<div id="diagram-2"></div>
</div>
<div class="col-6">
<div class="col-md-6 mb-4">
<p>This example shows a vertical fretboard with the following configuration options:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled</li>
Expand All @@ -78,10 +78,10 @@ <h5>Code</h5>
<!-- BEGIN: example 3 -->
<h2 class="border-bottom border-1 mb-4">Example 3 - Changing string and fret count with custom string names and horizontal orientation</h2>
<div class="row mb-5">
<div class="col-6">
<div class="col-md-6 mb-4">
<div id="diagram-3"></div>
</div>
<div class="col-6">
<div class="col-md-6 mb-4">
<p>This example shows a horizontal fretboard with the following configuration options:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled with custom string names (drop D, 4 strings for bass)</li>
Expand Down Expand Up @@ -122,10 +122,10 @@ <h5>Code</h5>
<!-- BEGIN: example 4 -->
<h2 class="border-bottom border-1 mb-4">Example 4 - Scaling</h2>
<div class="row mb-5">
<div class="col-6">
<div class="col-md-6 mb-4">
<div id="diagram-4"></div>
</div>
<div class="col-6">
<div class="col-md-6 mb-4">
<p>This example shows a vertical fretboard with the following configuration options:</p>
<ul class="list-group mb-3">
<li class="list-group-item">Diagram scaled to 60% (.6)</li>
Expand All @@ -151,10 +151,10 @@ <h5>Code</h5>
<!-- BEGIN: example 5 -->
<h2 class="border-bottom border-1 mb-4">Example 5 - Customizing visuals</h2>
<div class="row mb-5">
<div class="col-6">
<div class="col-md-6 mb-4">
<div id="diagram-5"></div>
</div>
<div class="col-6">
<div class="col-md-6 mb-4">
<p>This example, while <em>intentionally</em> not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled</li>
Expand Down Expand Up @@ -205,10 +205,10 @@ <h5>Code</h5>
<!-- BEGIN: example 6 -->
<h2 class="border-bottom border-1 mb-4">Example 6 - Controls</h2>
<div class="row mb-5">
<div class="col-6">
<div class="col-md-6 mb-4">
<div id="diagram-6"></div>
</div>
<div class="col-6">
<div class="col-md-6 mb-4">
<p>This example demonstrates some configuration options for controls as shown below:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled</li>
Expand Down

0 comments on commit 2048419

Please sign in to comment.