From 167f5c86a20cfa43aecb17c80082d70d1463d75e Mon Sep 17 00:00:00 2001
From: Nuoxi <u7527676@anu.edu.au>
Date: Wed, 25 Oct 2023 21:43:00 +1100
Subject: [PATCH] Made 'intro to python' responsive for mobile view

---
 .../Python_Basics/Introduction-to-Python.jsx  |  2 +-
 src/index.css                                 | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx b/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx
index 84db2be..6f66e79 100644
--- a/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx
+++ b/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const PythonBasics = () => {
   return (
-    <div>
+    <div className="python-intro">
 
       <h1><b>1. Introduction to Python</b></h1>
       <br />
diff --git a/src/index.css b/src/index.css
index 1a907e1..99b5fe6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,3 +25,31 @@
 .active {
   @apply bg-blue-100 text-blue-600;
 }
+
+/* Mobile styles for intro-to-python page */
+@media (max-width: 640px) {
+
+  .python-intro pre {
+      font-size: 0.875rem; 
+      overflow-x: auto; 
+  }
+
+  .python-intro h1 {
+      font-size: 1.5rem;
+      line-height: 1.4;
+  }
+
+  .python-intro h2 {
+      font-size: 1.25rem;
+      line-height: 1.3;
+  }
+
+  .python-intro h4 {
+      font-size: 1rem;
+  }
+
+  .python-intro li {
+      margin-bottom: 0.5rem;
+  }
+
+}