Media queries

[danielebarisano]

Buonasera raga esperti di CSS, su questo link https://app.danielebarisano.it/ripassoquiz/form.php funziona solo il codice CSS su dispositivi desktop, su smartphone e tablet no.

@media screen and (min-width: 769px) {
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
  }
  
  /* Style the label to display next to the inputs */
  label {
    padding: 12px 12px 12px 0;
    display: inline-block;
  }
  
  /* Style the submit button */
  input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }
  
  /* Style the container */
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
  
  /* Floating column for labels: 25% width */
  .col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
  }
  
  /* Floating column for inputs: 75% width */
  .col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
}
  
  /* Responsive layout  */
@media screen and (max-width: 768px) {
   .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
      background: green;
    }
}

Sapete dirmi dove è l errore?

[Vincent.Zeno]

manca il viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

https://www.w3schools.com/css/css_rwd_viewport.asp