Отключение и включение переноса тегом
для мобильных устройств
Всем привет Есть HTML
<h4>Запись на тренировки: <br id="break">8-962-***-**-**</h4>Как сделать, чтобы номер телефона переносился на новую строку только для мобильных устройств?
Я попробовал придать в основном css свойство display:none для этого br. Он исчез, если смотришь с компа. Но даже если в
@media only screen and (max-width: 480px) {display:block }Ответы (2 шт):
Автор решения: BlackStar1991
→ Ссылка
Поместите номер телефона в тег <span class="forMobile"></span> А дальше просто меняйте значение display по медиа выражениям display:inline-block; а для мобильных display:block; Это будет семантически более корректно, чем засовывать в параграф <br>
Автор решения: Bear Vorkuta
→ Ссылка
У вас в медиазапросе не было элемента, которому вы назначаете display:block;
Ну и как правильно заметили, лучше span используйте.
@media only screen and (max-width: 480px) {
span {
display:block;
}
}<h4>Запись на тренировки: <span id="break">8-962-***-**-**</span></h4>