Fixed Responsiveness for 480px devices

index.html

@@ -208,9 +208,9 @@
                     <h3>KDE Plasma</h3>
                     <p>Simple by default, powerful when needed. Plasma is made to stay out of the way when you want to focus on your work, but it's there and ready when you need its power.</p>
                     <p>Discover the ease of use, fine-tuned with the same attention to detail that makes Plasma shine. A streamlined interface that stays out of your way lets you focus on your work.</p>
-                    <p>Author: https://x.com/LinuxScoop/status/1432903154484449283/photo/1</p>
+                    <p>Author: <a href="https://x.com/LinuxScoop/status/1432903154484449283/photo/1">X Post</a></p>
                 </div>
-                <img src="/assets/snigdhaos-plasma.jpeg?height=300&width=500" alt="KDE Plasma Desktop" class="desktop-image">
+                <img src="/assets/snigdhaos-plasma.jpeg" alt="KDE Plasma Desktop" class="desktop-image">
             </div>
         </div>
     </section>

style.css

@@ -22,11 +22,10 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 5%;
     position: fixed;
     width: 100%;
     top: 0;
-    background-color: rgba(26, 31, 44, 0.95);
+    background-color: rgba(26, 31, 44, 0.70);
     z-index: 1000;
 }
 
@@ -52,7 +51,7 @@ body {
     display: flex;
     align-items: center;
     padding: 0 5%;
-    background-image: url(/assets/background.jpg); 
+    background-image: url(/assets/background.jpg);
     position: relative;
     overflow: hidden;
     background-position: bottom;
@@ -255,7 +254,7 @@ body {
 }
 
 .desktop-environments {
-    padding: 5rem 5%;
+    padding: 10px;
 }
 
 .desktop-grid {
@@ -277,7 +276,7 @@ body {
 
 .desktop-image {
     width: 100%;
-    height: auto;
+    height: 100%;
     border-radius: 8px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
@@ -339,6 +338,8 @@ body {
     .platform-grid {
         grid-template-columns: 1fr;
     }
+    
+    
 }
 .footer {
 background-color: #000;
@@ -515,7 +516,9 @@ margin-top: 2rem;
 .footer-content {
     grid-template-columns: 1fr;
 }
-
+nav.navbar{
+    width: 100%;
+}
 .footer-section {
     text-align: center;
 }
@@ -523,4 +526,13 @@ margin-top: 2rem;
 .with-icon {
     justify-content: center;
 }
+.desktop-card{
+    width: 460px;
+    text-align: left;
 }
+.desktop-card p {
+    text-align: left;
+    
+}
+}
+}