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

@timbelend · Регистрация: 14.06.2016

Author24 — интернет-сервис помощи студентам

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

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; 
}

@mrtoxas · 29.06.2016, 13:21

Не вдаваясь в код, как вы себе представляете этот текст в шапке при уменьшенном экране?

@timbelend · 29.06.2016, 13:36 **[ТС]**

Хочу, чтобы телефон влезал между кнопкой меню и поиском. И не съезжал вниз.

@mrtoxas · 29.06.2016, 13:44

Уменьшайте шрифт, пока не влезет

@timbelend · 29.06.2016, 13:45 **[ТС]**

Я дилетант, а что именно подправить в коде?

@diplodox · 29.06.2016, 13:48

CSS
1
2
3
.phone {
font-size: (размер шрифта)px
}

@timbelend · 29.06.2016, 14:19 **[ТС]**

Спасибо!

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

Добавлено через 1 минуту
а как прописать @media или сделать так чтобы

CSS
1
.phone { font-size: 7px }

показывался только в мобильных версиях сайта. Приколхозил а добиться все таки немогу, чтобы на пк показывало как есть. а в мобилках маленьким шрифтом

@mrtoxas · 29.06.2016, 14:27

В этом шаблоне оно "на мобилке" показывает как есть, а на компьютере - увеличенный.

Добавлено через 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 }
}
 
/* И так далее */

Новые блоги и статьи Все статьи Все блоги /
Образование и практика Igor3D 21.03.2025 Добрый день А вот каково качество/ эффективность ВУЗовского образования? Аналитическая геометрия изучается в первом семестре и считается довольно легким курсом, что вполне справедливо. Ну хорошо,. . .	Lazarus. Таблица с объединением ячеек. Massaraksh7 21.03.2025 Понадобилась представление на экране таблицы с объединёнными ячейками. И не одной, а штук триста, и все разные. На Delphi я использовал для этих целей TStringGrid, и то, кривовато получалось. А в. . .	Async/await в Swift: Асинхронное программирование в iOS mobDevWorks 20.03.2025 Асинхронное программирование долго было одной из самых сложных задач для разработчиков iOS. В течение многих лет мы сражались с замыканиями, диспетчеризацией очередей и обратными вызовами, чтобы. . .	Колмогоровская сложность: Приёмы упрощения кода ArchitectMsa 20.03.2025 Наверное, каждый программист хотя бы раз сталкивался с кодом, который напоминает запутанный лабиринт — чем дальше в него погружаешься, тем сложнее найти выход. И когда мы говорим о сложности кода, мы. . .	PostgreSQL в Kubernetes: Подготовка кластера и настройка Mr. Docker 20.03.2025 Когда доходит до контейнеризации баз данных и особенно таких требовательных к ресурсам системах как PostgreSQL, многие команды до сих пор колеблются, прежде чем перенести их в контейнерную. . .
C++26: Индексирование пакетов и метапрограммирование bytestream 20.03.2025 Эволюция C++ продолжается стремительными темпами – каждый новый стандарт приносит функциональность, о которой мы мечтали годами. Звучит слишком громко? Если вы когда-либо боролись с вариадическими. . .	Состояние гонки в C#: подводные камни многопоточного программирования UnmanagedCoder 20.03.2025 Что такое состояние гонки? Это ситуация, когда результат программы непредсказуемо меняется в зависимости от порядка выполнения потоков. Проще говоря, два или более потока пытаются одновременно. . .	Next.js для разработки React: преимущества серверного рендеринга Reangularity 20.03.2025 Next. js решает классическую проблему React-приложений: медленную первоначальную загрузку и плохую индексацию поисковиками. Вместо того чтобы заставлять браузер пользователя выполнять всю работу по. . .	JUnit или TestNG: Выбираем Java-фреймворк для тестирования Javaican 20.03.2025 История тестовых фреймворков в Java началась в конце 90-х, когда Кент Бек и Эрих Гамма разработали JUnit - инструмент, который перевернул представление разработчиков о модульном тестировании. JUnit. . .	Разбиваем монолит на два микросервиса и реализуем CI/CD ArchitectMsa 20.03.2025 Когда команда растет, а функциональность монолита расширяется, поддерживать и развивать такую систему становится все труднее. Разработчики начинают тратить много времени на разбор сложных. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	29.06.2016, 13:21
	Не вдаваясь в код, как вы себе представляете этот текст в шапке при уменьшенном экране? 1

@timbelend 0 / 0 / 0 Регистрация: 14.06.2016 Сообщений: 10
	29.06.2016, 13:36 [ТС]
	Хочу, чтобы телефон влезал между кнопкой меню и поиском. И не съезжал вниз. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	29.06.2016, 13:44
	Уменьшайте шрифт, пока не влезет 1

@timbelend 0 / 0 / 0 Регистрация: 14.06.2016 Сообщений: 10
	29.06.2016, 13:45 [ТС]
	Я дилетант, а что именно подправить в коде? 0

Опции темы

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

Решение