Visualizzazione dei risultati da 1 a 2 su 2

Discussione: css responsive dentro media query non viene applicato

  1. #1

    css responsive dentro media query non viene applicato

    codice:
    css
    #grad1 {
        margin-left: 25%;
        height: 216px;
        width: 599px;
        background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1)); 
        border-radius:10px;
    }
    #grad1:hover {
        margin-left: 25%;
        height: 216px;
        width: 599px;
        background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); 
        border-radius:10px;
    }
    @media (max-width: 767px){
    #grad1 {
        margin-left: 0px;
        
    }
    
    html 
    <div id=#grad1>
    </div>
    non cambia nulla rimpicciolendo la pagina
    mentre in questo caso non casica proprio in css:
    codice:
    css
    .grad1 {
        margin-left: 25%;
        height: 216px;
        width: 599px;
        background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1)); 
        border-radius:10px;
    }
    .grad1:hover {
        margin-left: 25%;
        height: 216px;
        width: 599px;
        background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); 
        border-radius:10px;
    }
    @media (max-width: 767px){
    .grad1 {
        margin-left: 0px;
        
    }
    
    html 
    <div class="grad1">
    </div>
    se c'e' qualcuno disposto condivido su drive il codice completo

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,116
    [Mod]
    Ciao e benvenuto. Purtroppo devo riprenderti su alcuni punti.

    1. Occhio ai titoli.
    Quote Originariamente inviata da simonevetere
    problema responsive
    Quando apri delle discussioni per richieste tecniche abbi l'accortezza di utilizzare dei titoli esplicativi. Consiglio di (ri)leggere il regolamento di sezione; presente per ogni sezione tra le discussioni in evidenza.

    Un titolo appropriato, esplicativo e chiaro è fondamentale perché aumenta la probabilità di ricevere risposte mirate e competenti e che la discussione sia reperibile facilmente con la ricerca da chi ne ha bisogno (altri utenti o anche da voi stessi) a distanza di tempo.
    Per questa volta modifico io. Fai attenzione in futuro.

    2. Nei forum tecnici evitiamo di fare richieste di aiuto ad personam.
    se c'e' qualcuno disposto condivido su drive il codice completo
    Questo è un forum pubblico, esiste perché tutti possano essere aiutati e tutti possano apportare il proprio contributo condividendolo pubblicamente. Se stai cercando una persona che ti risolva il problema in privato, esiste la sezione Offro lavoro/collaborazione; valida anche per richieste senza retribuzione.

    Capisco che magari tu non abbia voluto postare l'intero codice qui sul forum perché presumo sia troppo lungo. Ad ogni modo se la pagina che presenta il problema è online ed è accessibile pubblicamente, puoi postarne qui il link così che chiunque possa consultarla.

    In alternativa, se può essere utile a riprodurre il problema, così da rendere il codice accessibile a chiunque, puoi utilizzare uno dei vari editor online (vedi CodePen o altri che puoi trovare al capitolo 5 dei link utili CSS).
    [/Mod]

    Venendo alla tua richiesta, il codice sembra apparentemente ok a parte qualche errore che voglio pensare sia dovuto a come hai riportato l'esempio qui sul forum.
    Questo chiaramente è sbagliato:
    codice:
    <div id=#grad1>

    Dovrebbe essere scritto in questo modo:
    codice:
    <div id="grad1">

    Manca inoltre la chiusura della parentesi graffa per il blocco @media.

    A parte questo, se provo il tuo codice in una semplice pagina html, il tutto funziona come dovrebbe.
    Qui, ciò che ho provato:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <style>
             #grad1 {
                 margin-left: 25%;
                 height: 216px;
                 width: 599px;
                 background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1)); 
                 border-radius:10px;
             }
             #grad1:hover {
                 margin-left: 25%;
                 height: 216px;
                 width: 599px;
                 background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); 
                 border-radius:10px;
             }
             @media (max-width: 767px){
                #grad1 {
                    margin-left: 0px;
                }
             }
          </style>
       </head>
       <body>
          <div id="grad1">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper.
          </div>
       </body>
    </html>
    Se provo a restringere la finestra, il margine si azzera come specificato. Stessa cosa provando anche ad usare una classe.

    Posso giusto pensare che il problema sia da cercare altrove. Ci sarebbe da analizzare il resto del codice, giustappunto. Potrebbe esserci qualcosa di "rotto" o semplicemente qualche regola che ha maggiore priorità rispetto a queste altre, e ne annulla quindi gli effetti.

    La domanda è: puoi postare un link alla pagina in cui sta il problema?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Tag per questa discussione

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 © 2018 vBulletin Solutions, Inc. All rights reserved.