@MrLisovich

Как сделать чтобы блоки не переносились?

Как сделать, чтобы блоки не переносились на новую строку при мобильном размере, а уменьшались пропорционально с размером экрана?

CodePen
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ответы на вопрос 3
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Ну как бы вам сказать. Размер блоков — это одно. Их уместить в строку просто. Сложнее уместить шрифт, который не адаптивен по своей сути.

Но есть один метод:
https://css-tricks.com/snippets/css/fluid-typography/

Нужно будет скопировать сниппет, задать нужные параметры методом пробы.
Ответ написан
Ankhena
@Ankhena
Нежно люблю верстку
Вы, конечно, можете задать размер шрифта в vw. Но когда шрифт станет микроскопическим что делать станете?
На мобильных размерах нужно перестраивать меню в вертикальное.
Ответ написан
AngReload
@AngReload
Кратко о себе
.editor-item ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* переносить слова? */
}

.editor-item ul li{
  overflow: hidden;
  list-style: none;
  display: inline-block;
  padding: 10px;
}


https://codepen.io/AngReload/pen/JwRemO?editors=1100
Разумеется, при ширине меньше 350px текст не вмещается и обрезается.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Amigoweb Магнитогорск
от 30 000 до 40 000 руб.
iWeekender Краснодар
от 80 000 руб.
20 апр. 2019, в 16:31
500 руб./в час
20 апр. 2019, в 15:00
10000 руб./за проект
20 апр. 2019, в 14:48
30000 руб./за проект