Hide phone border on mobile devices

Author: Marek Rozmus

examples/src/app.css

@@ -6,6 +6,7 @@ h3 {
   margin-bottom: 0;
 }
 
+body,
 h5 {
   margin: 0;
 }
@@ -17,7 +18,7 @@ h5 {
 }
 
 .listContainer {
-  width: 360px;
+  width: 100%;
 }
 
 .listItem {
@@ -54,55 +55,57 @@ h5 {
 }
 
 .complexListContainer {
-  width: 360px;
+  width: 100%;
   height: 180px;
   border-top: 1px solid gray;
   border-bottom: 1px solid gray;
 }
 
-/* The device with borders */
-.smartphone {
-  position: relative;
-  width: 360px;
-  height: 640px;
-  margin: auto;
-  border: 16px black solid;
-  border-top-width: 60px;
-  border-bottom-width: 60px;
-  border-radius: 36px;
-}
+@media screen and (min-device-width: 1200px) {
+  /* The device with borders */
+  .smartphone {
+    position: relative;
+    width: 360px;
+    height: 640px;
+    margin: auto;
+    border: 16px black solid;
+    border-top-width: 60px;
+    border-bottom-width: 60px;
+    border-radius: 36px;
+  }
 
-/* The horizontal line on the top of the device */
-.smartphone::before {
-  content: '';
-  display: block;
-  width: 60px;
-  height: 5px;
-  position: absolute;
-  top: -30px;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: #333;
-  border-radius: 10px;
-}
+  /* The horizontal line on the top of the device */
+  .smartphone::before {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 5px;
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #333;
+    border-radius: 10px;
+  }
 
-/* The circle on the bottom of the device */
-.smartphone::after {
-  content: '';
-  display: block;
-  width: 35px;
-  height: 35px;
-  position: absolute;
-  left: 50%;
-  bottom: -65px;
-  transform: translate(-50%, -50%);
-  background: #333;
-  border-radius: 50%;
-}
+  /* The circle on the bottom of the device */
+  .smartphone::after {
+    content: '';
+    display: block;
+    width: 35px;
+    height: 35px;
+    position: absolute;
+    left: 50%;
+    bottom: -65px;
+    transform: translate(-50%, -50%);
+    background: #333;
+    border-radius: 50%;
+  }
 
-/* The screen (or content) of the device */
-.smartphone .content {
-  width: 360px;
-  height: 640px;
-  background: white;
+  /* The screen (or content) of the device */
+  .smartphone .content {
+    width: 360px;
+    height: 640px;
+    background: white;
+  }
 }