download.html container overflow issue fixed

Exodia-OS · Oct 19, 2024 · 3353a22 · 3353a22
1 parent f6c83c6
commit 3353a22
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 42 deletions.
diff --git a/Style/Download.css b/Style/Download.css
@@ -6,10 +6,10 @@ body{
 {
     height: 90px;
 }
-.Download{
-
+.Download {
     width: 100%;
-    height: 900px;
+    height: auto;
+    padding-top: 20px;
 }
 
 
@@ -21,12 +21,11 @@ body{
 
 
 
-.Download-button
-{
+.Download-button {
     color: #010D16;
     height: 65px;
     border-radius: 10px;  
-    width: 280px;
+    width: 18%;
     cursor: pointer;
 }
 
@@ -64,14 +63,10 @@ body{
 
 /* Content */
 
-.content-download
-{
+.content-download {
     background-color: #041a2b;
     border-radius: 15px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 120%;
+    width: 100%;
 }
 
 

diff --git a/download.html b/download.html
@@ -39,40 +39,35 @@
 <section class="Download">
     <div class="container ">
         <div class="row">
-        <div  class="col-3 d-flex flex-column gap-4 ">
-            <!--Download Buttons -->
-
-            <div  id="Home-ed" class="Download-button d-flex align-items-center p-4 ">
-                <img src="./Images/Logos/Home.png" hight="20px"  alt="">
-                <h5 class="mx-2">Home</h5>
-            </div>
-
-            <div  id="Predator-ed" class="Download-button d-flex align-items-center p-4 ">
-                <img src="./Images/Logos/Predator.png" hight="20px"  alt="">
-                <h5 class="mx-2">Acer-Predator</h5>
-            </div>
-
-
-            <div  id="Wireless-ed" class="Download-button d-flex align-items-center p-4 ">
-                <img src="./Images/Logos/wireless.png" alt="">
-                <h5 class="mx-2">Wireless</h5>
-            </div>
-
-            <div  id="Dark-ed" class="Download-button d-flex align-items-center p-4 ">
-                <img src="./Images/Logos/Dark-ed.png" alt="">
-                <h5 class="mx-2">Dark</h5>
-            </div>
-
-            <div  id="ARM-ed" class="Download-button d-flex align-items-center p-4 ">
-                <img src="./Images/Logos/ARM.png" alt="">
-                <h5 class="mx-2">ARM</h5>
+            <!-- Download Buttons -->
+            <div class="col-12 mb-4">
+                <div class="d-flex justify-content-between">
+                    <div id="Home-ed" class="Download-button d-flex align-items-center p-3">
+                        <img src="./Images/Logos/Home.png" height="20px" alt="">
+                        <h5 class="mx-2">Home</h5>
+                    </div>
+                    <div id="Predator-ed" class="Download-button d-flex align-items-center p-3">
+                        <img src="./Images/Logos/Predator.png" height="20px" alt="">
+                        <h5 class="mx-2">Acer-Predator</h5>
+                    </div>
+                    <div id="Wireless-ed" class="Download-button d-flex align-items-center p-3">
+                        <img src="./Images/Logos/wireless.png" alt="">
+                        <h5 class="mx-2">Wireless</h5>
+                    </div>
+                    <div id="Dark-ed" class="Download-button d-flex align-items-center p-3">
+                        <img src="./Images/Logos/Dark-ed.png" alt="">
+                        <h5 class="mx-2">Dark</h5>
+                    </div>
+                    <div id="ARM-ed" class="Download-button d-flex align-items-center p-3">
+                        <img src="./Images/Logos/ARM.png" alt="">
+                        <h5 class="mx-2">ARM</h5>
+                    </div>
+                </div>
             </div>
 
-        </div>
-
 
                 <!-- Download-content-->
-                <div class="col-8 mb-5">
+                <div class="col-12">
 
                     <!-- Home-edtion -->
                     <div id="Home-ed-cont" class="content-download active p-4 ed-1">