Fix mobile view

frontend/css/button.css

@@ -25,8 +25,11 @@
 }
 @media only screen and (max-width: 1000px) {
   .button {
-    font-size: 1.45em;
+    box-sizing: border-box;
-    padding: 0.3em;
+    max-width: 100%;
-    margin: 0.15em;
+    min-height: 44px;
+    font-size: 1.125rem;
+    padding: 0.75em;
+    margin: 0.25em 0;
   }
 }

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;
   }
 }

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;
+    font-size: 1rem;
-  }
+    width: 100%;
-  img {
+    min-height: 44px;
-    max-width: 400px;
+    padding: 0.5em;
   }
   select {
-    font-size: 0.8em;
+    font-size: 1rem;
-    width: 30%;
+    width: 100%;
+    min-width: 0;
+    min-height: 44px;
+    padding: 0.75em;
   }
   hr {
-    border-bottom-width: 4px;
+    width: 70%;
-    width: 50%;
+  }
+  .menu ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
   }
   li {
-    font-size: 1.75em;
+    font-size: 1rem;
-    padding: 0.25em;
+    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;
+  }
 }

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: 28px;
-    height: 60px;
+    opacity: 1;
-  }
+    accent-color: #003366;
-  input[type="radio"] + label {
-    margin-left: -60px;
-    padding-left: 60px;
-    background-size: 60px 60px;
   }
+  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;
   }
 }

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