From c5342e51e8d26e34ee2c0e60971ef6eed6262ac0 Mon Sep 17 00:00:00 2001
From: can kurttekin <cankurttekin@gmail.com>
Date: Tue, 12 Nov 2024 01:14:21 +0300
Subject: [PATCH] main layout padding and home hero screenshot adjustment on
 mobile

---
 frontend/src/components/layout/MainContent.js |  3 ++-
 frontend/src/styles/Home.css                  | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/layout/MainContent.js b/frontend/src/components/layout/MainContent.js
index 2c488afb..39233753 100644
--- 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
index 1c3ed251..2b396aca 100644
--- 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 {