@MrLisovich

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

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

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

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

Нужно будет скопировать сниппет, задать нужные параметры методом пробы.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Вы, конечно, можете задать размер шрифта в vw. Но когда шрифт станет микроскопическим что делать станете?
На мобильных размерах нужно перестраивать меню в вертикальное.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
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 текст не вмещается и обрезается.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
23 апр. 2024, в 19:21
300 руб./за проект
23 апр. 2024, в 19:05
15000 руб./за проект
23 апр. 2024, в 18:47
10000 руб./за проект