experience more responsive mobile design

css/experience.css

@@ -1,3 +1,10 @@
+/*!
+ * experience.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
 #section3 {
     background-color: #53bf65;
 }
@@ -54,16 +61,9 @@
     height: 260px;
     background-color: #357840;
     color: white;
-    border-radius: 5mm;;
+    border-radius: 5mm;
 }
 
-/*!
- * experience.css - https://heili.eu
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- * E-mail: lukas.heiligenbrunner@gmail.com
- * Copyright (c) 2020 Lukas Heiligenbrunner
- */
-
 .ratiobtn {
     display: none;
 }
@@ -84,3 +84,37 @@
     margin-top: 5mm;
     font-size: large;
 }
+
+/* Screen smaller than 600px -- general small width screens */
+@media screen and (max-width: 1200px) {
+    #section3 {
+        height: 100%;
+    }
+    .tab {
+        display: inline-block;
+        width: 20%;
+        /*float: left;*/
+
+        margin-right: 0;
+
+        border: 0mm solid hsla(0, 100%, 50%, 0);
+        padding-left: 0;
+        clear: none;
+        margin-bottom: 70px;
+    }
+
+    .content {
+        position: static;
+        display: block;
+        float: none;
+        width: auto;
+        height: 450px;
+    }
+
+    .ratiobtn:checked + .tab {
+        color: aqua;
+        transition: border-left-color 500ms;
+    }
+
+}
+

css/general.css

@@ -16,7 +16,7 @@ body, html, #maincontent {
     height: 80%;
     padding-top: 70px;
     padding-bottom: 70px;
-    min-height: 530px;
+    min-height: 570px;
 }
 
 #backtotopbutton {

css/home.css

@@ -8,6 +8,7 @@
 #section1 {
     background-color: #311E25;
     color: white;
+    padding-top: 200px;
 }
 
 .lightOpacity {
@@ -19,6 +20,7 @@
 }
 
 #preTitle {
+    font-size: 35px;
     opacity: 0.8;
     color: #fffd80;
 }
@@ -28,36 +30,32 @@
     height: 400px;
 }
 
-/* screen larger than 600px -- desktop */
-@media screen and (min-width: 1201px) {
-    #section1 {
-        padding-top: 200px;
-    }
+#titleText {
+    font-size: 80px;
+}
 
-    #preTitle {
-        font-size: 35px;
-    }
+#subTitleText {
+    font-size: 50px;
+}
 
-    #titleText {
-        font-size: 80px;
-    }
+#meaningFullSentence {
+    width: 40%;
+}
 
-    #subTitleText {
-        font-size: 50px;
-    }
+/* todo maybe a bit weird??  */
+#homepicture:hover {
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
+    transition: all 500ms;
+}
 
-    #meaningFullSentence {
-        width: 40%;
-    }
-
-    /* todo maybe a bit weird??  */
-    #homepicture:hover {
-        box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
-        transition: all 500ms;
+/* height smaller than 720px */
+@media screen and (max-height: 720px) {
+    #homepicture {
+        height: 300px;
     }
 }
 
-/* Screen smaller than 600px -- mobile */
+/* Screen smaller than 600px -- general small width screens */
 @media screen and (max-width: 1200px) {
     #section1 {
         padding-top: 100px;
@@ -85,4 +83,8 @@
         height: 300px;
         width: 100%;
     }
+}
+
+@media only screen and (min-width: 600px) {
+    /* For tablets: */
 }