css font-size seems to work better but not really great

src/lessc/page/custom-iphone.less

@@ -3,16 +3,18 @@
   &.box-size-third {
     .flexitem {
       position: relative;
-      margin: 1%;
-      flex: 0 0 31%;
+      @media @desktop{
+        margin: 1%;
+      }
     }
   }
 
   &.box-size-half {
     .flexitem {
       position: relative;
-      margin: 1%;
-      flex: 0 0 49%;
+      @media @desktop{
+        margin: 1%;
+      }
     }
   }
 
@@ -26,13 +28,19 @@
   }
 
   img {
-    border-radius: 20px;
+    @media @desktop{
+      border-radius: 20px;
+    }
+    border-radius: 10vw;
     width: 100%;
   }
 
   .label {
     color: white;
-    font-size: 0.8rem;
+    @media @desktop{
+      font-size: 0.8rem;
+    }
+    font-size: 8vw;
     position: absolute;
     top: 25%;
     left: 50%;
@@ -41,7 +49,11 @@
 
   .time {
     color: white;
-    font-size: 3rem;
+    @media @desktop{
+      font-size: 3rem;
+    }
+    font-size: 20vw;
+
     position: absolute;
     top: 18%;
     left: 50%;

src/lessc/page/font.less

@@ -8,7 +8,7 @@
 @font-publishing-date: @font-code;
 
 @font-size: 1rem;
-@font-size-code: 1rem;
+@font-size-mobile: 2rem;
 
 @font-sidebar: ~"'Abel', sans-serif";
 

src/lessc/page/main-hack-code.less

@@ -37,12 +37,12 @@
 
    font-weight: normal;
    font-family: @font-code;
-   line-height: @font-size-code;
+   line-height: @font-size;
 
    code {
      font-weight: normal;
      font-family: @font-code;
-     line-height: @font-size-code;
+     line-height: @font-size;
    }
  }
 

src/lessc/page/main-hack-flex.less

@@ -7,15 +7,23 @@
 
   &.box-size-half {
     .flexitem {
-      -ms-flex: 1 0 45%;
-      flex: 1 0 45%
+      @media @desktop {
+        -ms-flex: 1 0 45%;
+        flex: 1 0 45%
+      }
+      -ms-flex: 1 0 100%;
+      flex: 1 0 100%;
     }
   }
 
   &.box-size-third {
     .flexitem {
-      -ms-flex: 1 0 30%;
-      flex: 1 0 30%
+      @media @desktop {
+        -ms-flex: 1 0 30%;
+        flex: 1 0 30%
+      }
+      -ms-flex: 1 0 100%;
+      flex: 1 0 100%;
     }
   }
 

src/lessc/page/main-navigation.less

@@ -1,7 +1,9 @@
 #main-navigation {
   background-color: @color-nav-background;
-
-  width: 800px;
+  @media @desktop {
+    width: 800px;
+  }
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
 

src/lessc/page/main.less

@@ -1,5 +1,3 @@
-
-
 @import "color.less";
 @import "media-types.less";
 @import "font.less";
@@ -15,31 +13,46 @@
 
 html {
   font-family: @font-normal;
-  font-size: @font-size;
+  @media @desktop{
+    font-size: @font-size;
+  }
+  font-size: @font-size-mobile;
   background-color: @color-body-background;
   color: @color-body-font;
 }
-body {
-  margin: 0px;
 
-  header{
-    width: 800px;
+
+body {
+
+  header {
+    width: 100%;
+    @media @desktop {
+      width: 800px;
+    };
     margin-left: auto;
     margin-right: auto;
   }
+
   .content {
+    @media @desktop {
       width: 800px;
-      margin-left: auto;
-      margin-right: auto;
+    };
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
   }
+
   .content-big {
-    width: 1000px;
+    @media @desktop {
+      width: 1000px;
+    };
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-h1,h2,h3,h4 {
+h1, h2, h3, h4 {
   font-family: @font-header;
   font-size: 1.5rem;
 }
@@ -71,8 +84,8 @@ h1,h2,h3,h4 {
   pre {
 
     margin-left: 0;
-    padding-left: @special-info-padding-side * 2 ;
-    padding-right: @special-info-padding-side * 2 ;
+    padding-left: @special-info-padding-side * 2;
+    padding-right: @special-info-padding-side * 2;
     padding-top: .6em;
     padding-bottom: 0.4em;
 
@@ -95,10 +108,12 @@ table.comparison {
     background: @color-comparison-good;
     text-align: center;
   }
+
   .bad {
     background: @color-comparison-bad;
     text-align: center;
   }
+
   .ok {
     background: @color-comparison-ok;
     text-align: center;

src/lessc/page/media-types.less

@@ -1,3 +1,3 @@
-@desktop: ~"(min-width: 1180px)";
-@non-desktop: ~"(max-width: 1200px)";
+@desktop-min-width: 1180px;
+@desktop: ~"only screen and (min-width: @{desktop-min-width})";