Come inserire un <hr> solo con determinate risoluzioni

[adottauncane2]

Vorrei inserire un hr solo quando il mio sito è visualizzato in portrait mode come posso fare?
Immagino che dovrò inserire qualche cosa nel Miotemplate.css in qualche "@media" ...penso.
Come devo procedere?
Grazie.

[marine]

Prova a vedere se questa guida può fare al caso tuo

https://www.icagenda.it/media-query-cosa-sono-e-come-si-utilizzano.html

[adottauncane2]

Grazie darò un'occhiata. 

[fabrizium]

Ciao,
forse riesci a risolvere anche con un semplice border-bottom se vuoi separare dei contenuti, cmq in tutti i casi sia il bordo che il tag <HR> dovrai richiamarli nei css con le media queries per decidere a quali risoluzioni mostrarli, quindi passando ai dati pratici e immaginando che vuoi visualizzare questa linea solo per i telefonini o ipad in verticale nel tuo css avrai questo codice:


[size=inherit]@media[/size][size=inherit]([/size][size=inherit]max-width[/size][size=inherit]:[/size][size=inherit]768px[/size][size=inherit]) {[/size][size=inherit]    hr {[/size]        display: block;         border-width: 1px;    }}e quindi poi se invece non vuoi renderla visibile sopra a questa risoluzioneavrai:[size=inherit]@media[/size][size=inherit]([/size][size=inherit]min-width[/size][size=inherit]:[/size][size=inherit]769px[/size][size=inherit]) {[/size][size=inherit]hr {[/size]display: none;  }}se hai un bordo al bottom allora dovrai indicare l'elemento che ha il bordo e sostiuirlo all'Hr, quindise é una classe avrai[size=inherit]@media[/size][size=inherit]([/size][size=inherit]min-width[/size][size=inherit]:[/size][size=inherit]769px[/size][size=inherit]) {[/size][size=inherit].miaclasse {[/size]display: none;  }}o un elemento con una sua classe propria o un ID ( #mioid) per differenzialo da un'altro HR per contrassegnarlo....immagina che nel codice html hai due HR ma uno non lo vuoi nascondere:-)....allora ad uno gli associ una classe quindi per es <hr class="sempre visibile"> e nel css [size=inherit]@media[/size][size=inherit]([/size][size=inherit]min-width[/size][size=inherit]:[/size][size=inherit]769px[/size][size=inherit]) {[/size][size=inherit].semprevisibile {[/size]display: block;  }}Ok spero che abbia capito il meccanismo:-)ciao[/size

Ps: ho visto ora che non si capisce nulla....ahimé, appena posso correggo il tutto.

[fabrizium]

Mi scuso per il disastro sopra dovuto al fatto che ho copiato una formattazione da un mio editor...ok questo il testo :


@media (max-width768px) {


  hr {
       display: block;
        border-width: 1px;
    }
}
e quindi poi se invece non vuoi renderla visibile sopra a questa risoluzione avrai:


@media (min-width769px) {
hr {
display: none;
  }
}


se hai un bordo al bottom allora dovrai indicare l'elemento che ha il bordo e sostiuirlo all'Hr, quindi se é una classe avrai


@media (min-width769px) {
.miaclasse {
display: none;
  }
}


o un elemento con una sua classe propria o un ID ( #mioid) per differenzialo da un'altro HR per contrassegnarlo....immagina che nel codice html hai due HR ma uno non lo vuoi nascondere:-)....allora ad uno gli associ una classe quindi per es:


<hr class="sempre visibile"> e nel css


@media (min-width769px) {
.semprevisibile {
display: block;
  }
}


Ora mi sembra un poco piú leggibile