improve alphabet styling

2 files changed, 14 insertions, 2 deletions

diff --git a/css/main.css b/css/main.css
index 007c02a..e6f439d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -243,12 +243,18 @@ label, p {
 #alphabetGroup {
     border-radius: 0.25rem;
     overflow: hidden;
-    max-width: 990px;
+}
+
+#alphabetGroup.btn-group{
+    display: block;
 }
 
 #alphabetGroup button {
     margin-left: 0;
     border-radius: 0;
+    border-radius: 20px;
+    margin: 5px;
+    width: 40px;
 }
 
 #alphabetGroup .btn-outline-dark {
@@ -411,4 +417,10 @@ table, td, tr, th {
     #alphabetGroup.btn-group .btn:not(:first-child) {
         border-top-right-radius: 0;
     }*/
+}
+
+@media only screen and (min-width: 1780px){
+    .container {
+        max-width: 1600px;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 651a698..4c5dcbd 100644
--- a/index.html
+++ b/index.html
@@ -346,7 +346,7 @@
                         <!-- ALPHABET LIBRARY -->
                         <div class="row mt-3">
                             <div class="col text-center">
-                                <div id="alphabetGroup" class="btn-group flex-wrap" role="group"
+                                <div id="alphabetGroup" class="btn-group" role="group"
                                     aria-label="TV Library First Letter">
                                     <!-- set class "disabled" for buttons which are not active -->
                                     <button id="btnHash" disabled type="button" class="btn btn-outline-dark"