Wyśrodkowane <h2> na dużych rozdzielczościach ekranu, a na telefonie nie

To mój kod

<div class="container text-center">
	<br><br><br><br>

	<a href="" class="btn btn-primary" ng-mousemove="count = count + 1"> Counter </a>
	<br><br><br>
	<h2>{{ count }}</h2>
	<br>
</div>

Korzystam z bootstrapa, wiec ten text-center powinien robić robotę i zadziałać na znacznik h2. Jednak działa tylko połowicznie i na kompie wyświetla się na środku, a na telefonie jest po lewej. Why?

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Freja Draco napisał(a):

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Dodałem taką zasadę i nadal to samo.

@media (min-width: 500px) and (max-width: 1199px) {
    h2 {
        justify-content: center;
        align-items: center;
    }
}

h2 { 
  text-align:center;
}

justify-content i align-items służą do manipulowania elemenatmi elastycznymi (display:flex).

No i twoja reguła mówi jeśli ekran jest szerszy niż 500px a jednocześnie węższy niż 1199px, zastosuj poniższe style.

Próbowałem stosować text-align: center ale nie działa, działa to tylko na dużych monitorach, a na mój tel nie działa.

Edit. Okazało się, że to wina przeglądarki na telefonie.

br jest piękne ale na mobilnych urządzeniach nie do końca działa

@D46 0_o:
Napisałeś kurs z BR'a i nie umiesz go używać mobilnie?
Napisz jakie problemy napotkałeś podczas implementacji BR'a, że nie działa mobilnie?

Oj, stracisz w moich oczach i odbiorę Ci tytuł "Mastera od BR'a"