Joomla.it Forum
Joomla! 3 => Joomla! 3 => : adottauncane2 24 Jan 2018, 15:35:56
-
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.
-
Prova a vedere se questa guida può fare al caso tuo
https://www.icagenda.it/media-query-cosa-sono-e-come-si-utilizzano.html
-
Grazie darò un'occhiata. ;)
-
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.
-
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 ;)