corrected buttons one below the other in small screens

Author: sbonaretti

assets/css/style.css

@@ -1192,3 +1192,70 @@ section {
 #footer .credits {
   font-size: 13px;
 }
+
+
+
+/*--------------------------------------------------------------
+# Container of buttons download book and leave feedback 
+--------------------------------------------------------------*/
+
+/* Style for the container that holds the buttons */
+.button-container-top {
+  text-align: left;
+}
+
+/* Media query for screens with a maximum width of 600px (typical mobile screens) */
+@media only screen and (max-width: 600px) {
+  /* Change alignment to vertical */
+  .button-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  }
+  /* Add margin between buttons */
+  .button {
+      margin-bottom: 10px;
+  }
+}
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+
+/* Default styles for buttons */
+.button {
+  font-family: "Raleway", sans-serif;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 18px;
+  letter-spacing: 1px;
+  width: 275px; /* Fixed width for the buttons */
+  display: inline-block;
+  padding: 14px 40px;
+  border-radius: 0px;
+  transition: 0.5s;
+  margin-top: auto;
+  color: #fff;
+  background: #f39200;
+  outline: none; /* Remove the outline */
+  border: none;
+  text-align: center;
+}
+
+/* Style for the container that holds the buttons */
+.button-container {
+  text-align: left;
+}
+
+/* Media query for screens with a maximum width of 600px (typical mobile screens) */
+@media only screen and (max-width: 992px){
+  /* Change alignment to vertical */
+  .button-container {
+      align-items: center; /* Center horizontally */
+      justify-content: center; /* Center vertically */
+      text-align: center;
+  }
+  /* Add margin between buttons */
+  .button {
+      margin-bottom: 10px;
+      
+  }
+}

index.html

@@ -93,17 +93,16 @@ <h6>by <a href="https://sbonaretti.github.io/" target="_blank">Serena Bonaretti<
 
       <br>
       <br>
-      <a href="assets/book/learn_python_with_jupyter.pdf" class="btn-preorder">Get the free book</a>
-      <a href="https://forms.gle/iPiEc4wfW84e8QrS9" target="_blank" class="btn-preorder">Leave a feedback</a>
+
+      <div class="button-container">
+        <a href="assets/book/learn_python_with_jupyter.pdf" class="button">Get the free book</a>
+        <a href="https://forms.gle/iPiEc4wfW84e8QrS9" target="_blank" class="button">Leave a feedback</a>
+      </div>
       <br>
       <br>
       <h5>Read about the book on <a href="https://medium.com/p/11214f152159" target="_blank">Project Jupyter's blog</a>! </h5>
 
-      <!-- <br>
-      <br>
-      <a href="assets/book/learn_python_with_jupyter.pdf" class="btn-preorder">Leave a feedback!</a> -->
-
-
+      
       <!-- <a href="assets/sample/learn_python_with_jupyter_sample.pdf" target=_blank class="btn-preorder">Read free sample</a> -->
       <!--
       <div class="social-links">
@@ -530,7 +529,8 @@ <h4>BOOK PRESENTATIONS</h4>
         <!-- You can delete the links only if you purchased the pro version. -->
         <!-- Licensing information: [license-url] -->
         <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/ -->
-        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
+        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>, 
+        modified by <a href="https://sbonaretti.github.io/" target="_blank">Serena Bonaretti</a>
       </div>
     </div>
   </footer><!-- End Footer -->