Responzivní web

index.html

@@ -36,8 +36,11 @@
     </div>
     <hr />
 
+
     <div class="flexbox">
         <div class="navigation">
+            <div class="dropdown-content
+            ">
                 <table>
                     <caption>
                         Rubriky:
@@ -55,7 +58,8 @@
                                 <a class="button" href="testing-obecne.html">Testing obečně</a>
                             </li>
                             <li>
-                            <a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních aplikací</a>
+                                <a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních
+                                    aplikací</a>
                             </li>
                             <li>
                                 <a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a>
@@ -67,6 +71,8 @@
                     </tr>
                 </table>
             </div>
+        </div>
+
 
         <div class="content">
             <p class="big-text">Testing Docs CZ</p>

style.css

@@ -5,6 +5,7 @@
   --special_black_original: black;
 }
 
+/* Body */
 body {
   background-color: var(--special_black);
   color: var(--special_white);
@@ -13,6 +14,12 @@ body {
   margin: auto;
 }
 
+@media screen and (max-width: 600px) {
+  body {
+    width: calc(100% - 16px);
+  }
+}
+
 .menu-item {
   display: inline-block;
   width: 200px;
@@ -23,6 +30,7 @@ body {
 
 .flexbox {
   display: flex;
+  /* flex-direction: column; */
 }
 
 .navigation {
@@ -32,16 +40,55 @@ body {
   /* margin-top: 20px; */
 }
 
+/* .dropdown-content {
+  display: none;
+} */
+
 .content {
   flex: 3;
   margin-bottom: 25px;
 }
 
+@media screen and (max-width: 600px) {
+  /* Nastavení sloupcu na sloupce mobil */
+  .flexbox {
+    flex-direction: column;
+  }
+
+  /* ˇPořadí zobrazení */
+  .navigation {
+    order: -1;
+    flex-direction: column;
+  }
+
+  /* škrývání */
+  .navigation:hover .dropdown-content {
+    display: block;
+  }
+
+  /* roletka posuvník */
+  .dropdown-content {
+    overflow: auto;
+    max-height: 100px; /* or any other value */
+  }
+
+  .content {
+    order: 1;
+    flex-direction: column;
+  }
+}
+
 .articles {
   margin: 0px 50px 0px 0px;
   margin-top: 25px;
 }
 
+@media screen and (max-width: 600px) {
+  .articles {
+    display: none;
+  }
+}
+
 footer {
   position: fixed;
   bottom: 0;
@@ -89,6 +136,7 @@ th {
 
 .link {
   color: var(--special_white);
+  /*cursor: unset;*/
 }
 
 .strong-text {