made software page mobile responsive

Lmears · Jun 14, 2024 · 57cdfa4 · 57cdfa4
1 parent 6c3c50a
commit 57cdfa4
Showing 1 changed file with 41 additions and 27 deletions.
diff --git a/software/index.html b/software/index.html
@@ -41,45 +41,59 @@ <h1 class="w-full text-5xl leading-tight px-4">Software</h1>
                     <div class="flex flex-col sm:flex-row my-4">
                         <div class="px-4">
                             <h2>Smart Access:</h2>
-                            <p class="mb-4 ml-4 text-base font-light">
+                            <p class="ml-4 text-base font-light">
                                 - UI / UX
                                 <br>
                                 - Data forensics
                             </p>
-                            <p>
-                                <iframe src="https://app.smartaccess.enterprises/" style="width:800px; height:800px;"
-                                    frameborder="0"></iframe>
-                            </p>
-                            <br><br>
+                        </div>
+                    </div>
+                    <div class="px-4">
+                        <p>
+                            <iframe src="https://app.smartaccess.enterprises/" style="width:100%; height:800px;"
+                                frameborder="0"></iframe>
+                        </p>
+                    </div>
+                    <br>
+                    <div class="flex flex-col sm:flex-row my-4">
+                        <div class="px-4">
                             <h2>My Life My Voice:</h2>
-                            <p class="mb-4 ml-4 text-base font-light">
+                            <p class="ml-4 text-base font-light">
                                 - UI / UX
                             </p>
-                            <p>
-                                <iframe src="https://app.mylifemyvoice.org.nz/" style="width:800px; height:800px;"
-                                    frameborder="0"></iframe>
-                            </p>
-                            <br><br>
+                        </div>
+                    </div>
+                    <div class="px-4">
+                        <p>
+                            <iframe src="https://app.mylifemyvoice.org.nz/" style="width:100%; height:800px;"
+                                frameborder="0"></iframe>
+                        </p>
+                    </div>
+                    <br>
+                    <div class="flex flex-col sm:flex-row my-4">
+                        <div class="px-4">
                             <h2>Twisted Frequency:</h2>
-                            <p class="mb-4 ml-4 text-base font-light">
+                            <p class="ml-4 text-base font-light">
                                 - UI / UX
                             </p>
-                            <p>
-                                <iframe src="https://twistedfrequency.nz/" style="width:800px; height:800px;"
-                                    frameborder="0"></iframe>
-                            </p>
-                            <br><br>
-                            <p class="text-base font-light" style="text-align: center; display: block;">
-                                <a href="https://github.com/Lmears" target="_blank" class="hover-effect"
-                                    style="margin-right: 100px;">
-                                    <i class="fab fa-github" style="width: 30px;"></i> Github
-                                </a>
-                                <a href="https://github.com/Lmears/slypork-studio" target="_blank" class="hover-effect">
-                                    <i class="fas fa-code" style="width: 30px;"></i> Source code
-                                </a>
-                            </p>
                         </div>
                     </div>
+                    <div class="px-4">
+                        <p>
+                            <iframe src="https://twistedfrequency.nz/" style="width:100%; height:800px;"
+                                frameborder="0"></iframe>
+                        </p>
+                    </div>
+                    <br>
+                    <p class="text-base font-light" style="text-align: center; display: block;">
+                        <a href="https://github.com/Lmears" target="_blank" class="hover-effect"
+                            style="margin-right: 80px;">
+                            <i class="fab fa-github" style="width: 30px;"></i> Github
+                        </a>
+                        <a href="https://github.com/Lmears/slypork-studio" target="_blank" class="hover-effect">
+                            <i class="fas fa-code" style="width: 30px;"></i> Source code
+                        </a>
+                    </p>
                 </div>
             </div>
             <div class="pb-12"></div>