Как адаптировать для моб версии?

Question

[zoomiein]

Как адаптировать под моб дизайн. когда в мобильной версии, они сползают. друг под друга?

HTML:

<div class="header-navibox-5">
<a href="tel:[phone]" class="phone">8-998-785-45-45</a>
  <a href="tel:[phone]" class="phone">8-998-785-45-45</a>
</div>

CSS;

header-navibox-5{
 float: left;
 max-height: 80px;
 padding: 28px 0;
 font-size: 14px;
 margin-left: 20px;
 color: #fff;
}
header-navibox-5 a{
 color: #fff;
 font-size: 17px;
}

Answer 1

[Константин Теплоухов]

https://codepen.io/anon/pen/KRzoqK

Про float забудь как страшный сон .

Comments

[zoomiein]

Получилось что-то типа такого(( service.epsilon.by

[Константин Теплоухов]

zoomiein, у вас 2 блока header-navibox-5 . Зачем ? Он же как обёртка . В него уже кидайте ссылки a

[zoomiein]

Константин Теплоухов, я понимаю, мне просто нужны две кнопки такие

[Константин Теплоухов]

zoomiein, скинь скрин макета , что у тебя в шапке должно получиться ? Набросаю как чай попью

[zoomiein]

должно получится, что кнопки ближе к лого, и отступ между ними, и чтоб в моб версии также. заранее спасибо, я просто только начинаю

[Константин Теплоухов]

zoomiein, у тебя на сайте кликабелен только текст (номер телефона) . Это не кнопка .
Вот смотри , сделал кнопки - вроде как нужно (точные размеры сам подставишь , у меня же макета нет - пикселей не вижу .) https://codepen.io/anon/pen/zjqaZV
На экранах < или = 960px будет вот так

На экранах < или = 960 пикс.

на экранах больше 960px как тебе нужно

больше 960px

По поводу расположения относительно логотипа
Это тебе уже саму шапку переверстать нужно . Я бы посоветовал тоже на флексах .
можно сделать как-то так

header{
	display: flex;
	justify-content: space-between;
}

[zoomiein]

Константин Теплоухов, Спасибо тебе большое, повысил свои навыки я) Всего хорошего и самого наилучшего тебе)