From 20484196606e4489a7a490bde8c6e48ec51e2f29 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Thu, 13 Jun 2024 13:29:59 -0700
Subject: [PATCH] Fixing responsive width breakpoint for smaller browsers

---
 docs/examples/index.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/examples/index.html b/docs/examples/index.html
index 65808b2..ef4b97a 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -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();
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>