Question

Da sie zrobić responsywny tag <hr>? html & css & bootstrap

Chodz mi o to że jak zrobić hr który będzie dostosywał swoją długość do wielkości ekranu?

Bo normalnie jak zrobie <hr> to na telefonie jest ten pasek - a chciałbym żeby go nie było - żeby hr był dopasowany do szerokości ekranu? Jak to zrobić?

Comments

normalnie jak zrobie <hr> to na telefonie jest ten pasek - a chciałbym żeby go nie było - żeby hr był dopasowany do szerokości ekranu?

Jeśli na innej rozdzielczości ma się nie pokazywać, to dlaczego go po prostu nie ukryjesz przy użyciu media query?

Przy okazji, nie powinieneś używać <hr> jako ozdobnika (poziomej kreski), ponieważ ten element reprezentuje przerwę w bloku treści na stronie:

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Jeśli chcesz użyć poziomej kreski tylko w celach prezentacyjnych, to użyj CSS'a.

Answer 1

Jeśli chodzi o samą responsywność to wystarczy, że określisz długość <hr> w procentach np.:

hr{
width: 90%;
}

Po takim banalnym zapisie hr będzie dopasowywał swoją długość do rozdzielczości strony.

Z kolei jeśli chcesz, żeby na telefonie <hr> znikało to możesz zastosować taki zapis:

@media only screen and (max-width: 768px) {
        hr{
            width: 0%;
        }
    }

Wtedy po zmniejszeniu ekranu poniżej szerokości 768px twój <hr> zniknie.

Answer 2

Własność visibility w odpowiednim media querries.