From dd8ab2ac261faa4f5977588bb43f55f6264c01c5 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Tue, 27 Oct 2026 21:00:24 +0000
Subject: [PATCH] Fix mobile view

---
 frontend/css/button.css |  9 ++++--
 frontend/css/card.css   | 16 +++++++--
 frontend/css/fizika.css | 72 ++++++++++++++++++++++++++++++-----------
 frontend/css/radio.css  | 25 +++++++++-----
 frontend/index.html     |  1 +
 5 files changed, 92 insertions(+), 31 deletions(-)

diff --git a/frontend/css/button.css b/frontend/css/button.css
index af3711a..b0b9d02 100644
--- a/frontend/css/button.css
+++ b/frontend/css/button.css
@@ -25,8 +25,11 @@
 }
 @media only screen and (max-width: 1000px) {
   .button {
-    font-size: 1.45em;
-    padding: 0.3em;
-    margin: 0.15em;
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: 44px;
+    font-size: 1.125rem;
+    padding: 0.75em;
+    margin: 0.25em 0;
   }
 }
diff --git a/frontend/css/card.css b/frontend/css/card.css
index 1a5d483..ffa3408 100644
--- a/frontend/css/card.css
+++ b/frontend/css/card.css
@@ -38,10 +38,22 @@ img {
   max-width: 500px;
 }
 @media only screen and (max-width: 1000px) {
+  .card {
+    padding: 1em;
+    margin: 1.5em 0;
+  }
   h2 {
-    font-size: 1.6em;
+    font-size: 1.25rem;
   }
   pre {
-    font-size: 1em;
+    font-size: 1rem;
+    line-height: 1.6;
+    text-align: left;
+  }
+  .card img {
+    float: none;
+    max-width: 100%;
+    height: auto;
+    margin: 1em auto;
   }
 }
diff --git a/frontend/css/fizika.css b/frontend/css/fizika.css
index 836a3e2..dced7c3 100644
--- a/frontend/css/fizika.css
+++ b/frontend/css/fizika.css
@@ -218,40 +218,57 @@ h4 {
 
 @media only screen and (max-width: 1000px) {
   body {
-    font-size: 1.75em;
+    font-size: 1em;
   }
   h1 {
-    font-size: 7em;
+    font-size: clamp(2.5rem, 8vw, 5rem);
   }
   h1:hover {
     text-shadow: none;
   }
   #wrapper {
-    width: 90%;
+    width: 95%;
   }
   .szoveg {
-    width: 90%;
+    width: 100%;
+  }
+  .buttonwrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75em;
+    margin: 1em 0;
   }
   #numberof {
-    font-size: 0.6em;
-  }
-  img {
-    max-width: 400px;
+    font-size: 1rem;
+    width: 100%;
+    min-height: 44px;
+    padding: 0.5em;
   }
   select {
-    font-size: 0.8em;
-    width: 30%;
+    font-size: 1rem;
+    width: 100%;
+    min-width: 0;
+    min-height: 44px;
+    padding: 0.75em;
   }
   hr {
-    border-bottom-width: 4px;
-    width: 50%;
+    width: 70%;
+  }
+  .menu ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
   }
   li {
-    font-size: 1.75em;
-    padding: 0.25em;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0.75em 0.5em;
   }
   p {
-    font-size: 0.75em;
+    font-size: 1rem;
+    line-height: 1.6;
+    text-align: left;
   }
   p:first-of-type {
     padding-top: 0.5em;
@@ -261,12 +278,31 @@ h4 {
   }
 
   #tablazat {
-    font-size: 0.8em;
+    font-size: 0.875rem;
+    overflow-x: auto;
+  }
+  #temak {
+    flex-direction: column;
+  }
+  .fele {
+    width: 100%;
+  }
+  .main {
+    font-size: 1.25rem;
   }
   .mbcheck {
-    font-size: 0.75em;
+    font-size: 1rem;
   }
-  #bal {
+  #bal,
+  #jobb {
+    float: none;
     margin-left: 0;
   }
+  #state,
+  #state2 {
+    font-size: 1.25rem;
+  }
+  #percentage {
+    font-size: 2rem;
+  }
 }
diff --git a/frontend/css/radio.css b/frontend/css/radio.css
index b5dd7c9..5497b23 100644
--- a/frontend/css/radio.css
+++ b/frontend/css/radio.css
@@ -29,16 +29,25 @@ input[type="radio"]:checked + label {
 }
 
 @media only screen and (max-width: 1000px) {
+  .card form {
+    display: grid;
+    grid-template-columns: 28px minmax(0, 1fr);
+    gap: 0.75em 0.5em;
+  }
+  .card form br {
+    display: none;
+  }
   input[type="radio"] {
-    width: 60px;
-    height: 60px;
-  }
-  input[type="radio"] + label {
-    margin-left: -60px;
-    padding-left: 60px;
-    background-size: 60px 60px;
+    height: 28px;
+    opacity: 1;
+    accent-color: #003366;
   }
+  input[type="radio"] + label,
   input[type="radio"]:checked + label {
-    background-size: 60px 60px;
+    margin: 0;
+    padding: 0;
+    background: none;
+    font-size: 1rem;
+    line-height: 1.6;
   }
 }
diff --git a/frontend/index.html b/frontend/index.html
index 155a2e4..9bf8537 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="hu-HU">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>Fizika érettségire felkészítő alkalmazás - EMELT szint -</title>
     <meta