main layout padding and home hero screenshot adjustment on mobile

cankurttekin · Nov 11, 2024 · c5342e5 · c5342e5
1 parent f07b2d5
commit c5342e5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/components/layout/MainContent.js b/frontend/src/components/layout/MainContent.js
@@ -3,7 +3,8 @@ import styled from 'styled-components';
 const MainContent = styled.div`
     flex: 1;
     padding: 20px;
-    margin: 20px;
+    margin-top: 20px;
+    //margin: 20px;
     //background-color: #ffffff;
     //border-radius: 10px;
     //box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

diff --git a/frontend/src/styles/Home.css b/frontend/src/styles/Home.css
@@ -4,7 +4,7 @@
     justify-content: space-between; /* Space between header and footer */
     min-height: 100vh; /* Ensure it occupies the full height of the viewport */
     text-align: center;
-    padding: 20px;
+    //padding: 10px;
     margin-top: 10px;
 }
 
@@ -63,6 +63,11 @@
 
 /* Media query for small devices */
 @media (max-width: 768px) {
+    .header-container {
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 30px;
+    }
     .big-text {
         font-size: 1.8em;
     }
@@ -89,8 +94,7 @@
     }
 
     .register-button {
-        width: 100%; /* Full-width button on mobile */
-        padding: 15px;
+        /*padding: 12px;*/
     }
 }
 
@@ -99,6 +103,7 @@
         margin-top: 20px;
     }
 
+
     .big-text {
         font-size: 1.6em;
     }
@@ -190,8 +195,10 @@ a:hover {
     }
 
     .screenshot-container {
-        max-width: 100%; /* Full width on small screens */
-        margin: 0 0 20px 0; /* Space below the image */
+        /*max-width: 220%;  Full width on small screens */
+        min-width: 230%;
+        margin-left: -126%;
+        //margin: 0 0 20px 0; /* Space below the image */
     }
 
     .screenshot-text {