From b4f66aa635c2ce4abe9f638c32a0bac28cde77b8 Mon Sep 17 00:00:00 2001
From: Beluzsar Peter <beluzsarp@gmail.com>
Date: Thu, 5 Feb 2026 23:29:18 +0100
Subject: [PATCH] css mobile

---
 kiszolgalo/src/main/resources/index.html | 11 +++------
 kiszolgalo/src/main/resources/style.css  | 31 +++++++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)
diff --git a/kiszolgalo/src/main/resources/index.html b/kiszolgalo/src/main/resources/index.html
index ce9fb81..ca318a5 100644
--- a/kiszolgalo/src/main/resources/index.html
+++ b/kiszolgalo/src/main/resources/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ScottGPT</title>
     <link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
     <link rel="stylesheet" href="/resources/style.css">
@@ -14,15 +15,9 @@
 <header class="navbar">
     <a href="https://sc0tt.org/" style="float: left" target="_blank">Sc0tt főoldal</a>
     <a href="/about" style="float: left">About</a>
-    <button onclick="genZ()" style="float: left;">Gen Z compatible site</button>
+    <button onclick="genZ()" style="float: left;" class="funny">Gen Z compatible site</button>
 
-    <img src="resources/logo.png" alt=logo" style="float: right;">
-
-    <a href="javascript:void(0);"
-       class="icon"
-       onclick="toggleMenu()">
-        &#9776;
-    </a>
+    <img src="resources/logo.png" alt=logo" class="logo" style="float: right;">
 </header>
 
     <iframe width="420" height="315"
diff --git a/kiszolgalo/src/main/resources/style.css b/kiszolgalo/src/main/resources/style.css
index d5d656d..6ca2a0d 100644
--- a/kiszolgalo/src/main/resources/style.css
+++ b/kiszolgalo/src/main/resources/style.css
@@ -2,6 +2,8 @@ body {
     background: #212121;
     color: white;
     font-family: Roboto, sans-serif;
+    max-width: 100%;
+    overflow-x: hidden;
 }
 
 .about-content {
@@ -21,17 +23,15 @@ body {
 }
 
 .main-content {
-/*
-    display: flex;
-    margin: auto;
-    text-align: center;
-    box-sizing: border-box;*/
+
     margin-top: 5%;
     margin-bottom: 0;
     justify-content: center;
     flex-direction: column;
     height: 80vh;
     overflow-y: scroll;
+    max-width: 100%;
+    overflow-x: hidden;
     flex-grow: 8;
 
     background: red;
@@ -63,7 +63,6 @@ body {
 }
 
 .messages {
-    margin-bottom: 10%;
     position: relative;
     display: flex;
     margin: 5px auto 0px auto;
@@ -121,12 +120,7 @@ body {
     background: #323232;
     display: flex;
     margin: auto;
-    @media (max-width: 600px) {
-      width: 100%;
-    }
-    @media (min-width: 600px) {
-      width: 80%;
-    }
+    width: 80%;
 
     padding: 10px 10px;
     border-radius: 25px;
@@ -185,6 +179,19 @@ footer {
     background-color: #545454;
 }
 
+@media (max-width: 767px) {
+    .messages {
+        width: 100%;
+    }
+    .message {
+        width: 80%;
+    }
+
+    .funny {
+        display: none;
+    }
+}
+
 .navbar a.icon {
     display: none;
 }
