Нужно сделать выравнивание по центру на мобильных экранах. (вопрос по css)

[CHADREX]

Есть страница на сайте, она сделана через конструктор страниц, поэтому в исходном коде можно только поблевать) Но суть не в этом. Мне нужно нужно эти элементы разместить по центру при использовании малых размеров экрана. Все получилось кроме черточки которая разделяет заголовок и текст.

Я пробовал приспособить этот код:

@media only screen and (max-width: 768px) {
    #uvc-heading-spacer {position: relative; margin:0 auto;}
}

@media only screen and (max-width: 768px) {
    .uvc-heading-spacer {position: relative; margin:0 auto;}
}

Но увы, не помогло. Не спрашивайте меня почему он одинаковый, сам не знаю, но заголовок у меня разместился по центру только таким способом. Ну собственно вот и та страница - Для просмотра ссылки Войди или Зарегистрируйся

 

[NikroVir]

Чтоб на мобилах работало то лучше написать

@media (max-width: 768px) {
любое правило
}

Вообще-то @media sreen and (max-width: 768px){...} или @media only screen and (max-width: 768px) {...} как раз и правильно писать, а то что вы предлагаете - вёрстка под все типы устройств, включая принтеры, проекторы, телевизоры и т.д.

По теме: Ваш блок не центрируется сейчас, т.к. его ширина выставлена 100%. (не искал где, т.к. нет времени разбираться в коде, уж извините).

@media screen and (max-width: 768px) {
#uvc-heading-spacer, .uvc-heading-spacer{position: relative; margin:0 auto; width:32px;}
}

вот верный вариант (повторюсь: в код не вникал, возможно вариант не совсем правильный, но всё должно заработать)

 

[tovGANs]

.uvc-headings-line - добавить margin: 0 auto; и убрать у span float: left;

 

[troop3r]

Добавить

.uvc-headings-line { float: none !important; }