css responsive dentro media query non viene applicato

**simonevetere** · 12-11-2018, 16:14

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

**KillerWorm** · 15-11-2018, 03:19

[Mod]
Ciao e benvenuto. Purtroppo devo riprenderti su alcuni punti.

1. Occhio ai titoli.

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?

Discussione: css responsive dentro media query non viene applicato

Strumenti discussione

Ricerca discussione

Visualizza

css responsive dentro media query non viene applicato

Tag per questa discussione

Permessi di invio