Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Media queries

  1. #1

    Media queries

    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.

    codice:
    @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?

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,702
    manca il viewport
    codice:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    https://www.w3schools.com/css/css_rwd_viewport.asp

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.