0 / 0 / 0
Регистрация: 14.06.2016
Сообщений: 10
1

CSS Ломается верстка в шапке в мобильной версии @MEDIA

29.06.2016, 11:55. Показов 2442. Ответов 7

После добавления телефона при масштабировании в мобильной версии ломается шапка. Как сделать что бы корректно отображался номер
Использую эту тему: http://demos.famethemes.com/codilight-lite/

CSS Ломается верстка в шапке в мобильной версии @MEDIA
CSS Ломается верстка в шапке в мобильной версии @MEDIA


header.php
HTML5
1
<div class="contact-row"><a href="tel:+7 950 071-01-63" class="phone inline">+7 950 851-71-63</a></div><a href="tel:+7 953 001-01-63" <span="" class="phone inline">
CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
.addres { 
font-size: 11px; 
padding: 0 20px; 
} 
.contact-row { 
float: left; 
padding: 0 20px; 
} 
.site-topbar ul { 
float: right; 
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.06.2016, 11:55
Ответы с готовыми решениями:

Верстка меню мобильной версии сайта
Всем привет! Сегодня зашла на хабр с мобильного устройства и обратила внимание на работу правого...

Поехала верстка вывода характеристик в мобильной версии сайта
Доброго времени суток! Поехала верстка значений атрибутов в мобильной версии сайта - во...

CSS меню мобильной версии сайта
Добрый день, задача такова, через @media подгружается css стиль для мобильных (при разрешении...

Проблема с мобильной версией сайта (верстка css)
Здравствуйте уважаемые, уже пару дней борюсь с непонятным отображением главной страницы сайта...

7
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
29.06.2016, 13:21 2
Не вдаваясь в код, как вы себе представляете этот текст в шапке при уменьшенном экране?
1
0 / 0 / 0
Регистрация: 14.06.2016
Сообщений: 10
29.06.2016, 13:36  [ТС] 3
Хочу, чтобы телефон влезал между кнопкой меню и поиском. И не съезжал вниз.
0
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
29.06.2016, 13:44 4
Уменьшайте шрифт, пока не влезет
1
0 / 0 / 0
Регистрация: 14.06.2016
Сообщений: 10
29.06.2016, 13:45  [ТС] 5
Я дилетант, а что именно подправить в коде?
0
23 / 22 / 11
Регистрация: 07.10.2013
Сообщений: 90
29.06.2016, 13:48 6
Лучший ответ Сообщение было отмечено timbelend как решение

Решение

CSS
1
2
3
.phone {
font-size: (размер шрифта)px
}
1
0 / 0 / 0
Регистрация: 14.06.2016
Сообщений: 10
29.06.2016, 14:19  [ТС] 7
Спасибо!

Добавлено через 25 минут

Добавлено через 1 минуту
а как прописать @media или сделать так чтобы
CSS
1
.phone { font-size: 7px }
показывался только в мобильных версиях сайта. Приколхозил а добиться все таки немогу, чтобы на пк показывало как есть. а в мобилках маленьким шрифтом
0
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
29.06.2016, 14:27 8
В этом шаблоне оно "на мобилке" показывает как есть, а на компьютере - увеличенный.

Добавлено через 4 минуты
CSS
1
2
3
4
5
6
7
8
9
10
11
.phone { font-size: 7px }
 
@media (min-width: 34em){
   .phone { font-size: 8px }
}
 
@media (min-width: 48em){
.phone { font-size: 9px }
}
 
/* И так далее */
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
29.06.2016, 14:27

Как в мобильной версии сайта через css задать размер картинки
Добрый вечер. Помогите пожалуйста. сайт https://airkolors.com/10-clever-lighting-design-ideas как в...

Как для web-версии и мобильной версии поставить разные картинки
Всем добрый вечер! Кто знает, подскажите: мне необходимо для вебверсии и мобильной версии поставить...

Ломается верстка
Есть сайт сайт На десктопе все отображается норм. Но если сайт открыть с мобильного или с...

Разница между @media и атрибутом media в CSS
Доброго времени суток! Очень каноничный ламер, буквально 2 дня назад начал читать про разметку...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.