fix: use context media feature range notation in style.css

style.css

@@ -2,50 +2,65 @@ body {
   font-family: Arial, sans-serif;
   margin: 20px;
 }
+
 fieldset {
   margin-bottom: 15px;
   border: 1px solid #ccc;
   padding: 10px;
 }
+
 legend {
   font-weight: bold;
 }
-input, textarea {
+
+input,
+textarea {
   width: 100%;
   padding: 5px;
   margin: 5px 0;
   box-sizing: border-box;
 }
-#items-table, .quotation-table {
+
+#items-table,
+.quotation-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 10px;
 }
-#items-table th, #items-table td,
-.quotation-table th, .quotation-table td {
+
+#items-table th,
+#items-table td,
+.quotation-table th,
+.quotation-table td {
   border: 1px solid #ccc;
   padding: 5px;
   text-align: left;
 }
+
 button {
   padding: 8px 12px;
   margin: 5px;
 }
+
 .quotation-print {
   max-width: 800px;
   margin: auto;
 }
+
 .quotation-print h2 {
   text-align: center;
   margin-bottom: 20px;
 }
+
 .quotation-print .section {
   margin-bottom: 15px;
 }
+
 .totals table {
   float: right;
   border: none;
 }
+
 .totals td {
   padding: 4px 8px;
   border: none;
@@ -59,4 +74,38 @@ button {
 
 .quote-meta {
   text-align: right;
-}
+}
+
+@media screen and (width <= 768px) {
+  #items-table thead {
+    display: none;
+  }
+
+  #items-table,
+  #items-table tbody,
+  #items-table tr,
+  #items-table td {
+    display: block;
+    width: 100%;
+  }
+
+  #items-table tr {
+    margin-bottom: 15px;
+  }
+
+  #items-table td {
+    text-align: right;
+    padding-left: 50%;
+    position: relative;
+  }
+
+  #items-table td::before {
+    content: attr(data-label);
+    position: absolute;
+    left: 0;
+    width: 45%;
+    padding-left: 15px;
+    font-weight: bold;
+    text-align: left;
+  }
+}