Почему контент не помещается на мобильнике HUAWEI?

Ширина скриншота это прекрасно.

Но знать нужно ширину вьюпорта.
Откройте ссылочку с телефона и посмотрите https://www.esolutions.se/en/test

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

Алексей Уколов,
ну в принципе, да, шило на мыло.
Но я бы, наверное, постаралась не дублировать Ккал.

<label for="kkal">
  Обед
  <span>
    <span>Ккал, %</span> 
    <input type="text" id="kkal" placeholder="">
  </span>
</label>

или

<label for="kkal">
  Обед
  <span>
    Ккал, %
    <input type="text" id="kkal" placeholder="">
  </span>
</label>

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

Sergey750il,

Только передал label на span.

Ну и зря.
Или оберните всё в label вместо div.

Можно ли автоматически высчитывать max-height на css?

Может кто сталкивался с этим и знает фичу как можно сделать.

Угу. Гриды с этим прекрасно справляются.
Кажется, на прошлой неделе писала ответ (ну или комментарий) к аналогичному вопросу.

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

Sergey750il, Начала бы с того, что посмотрела бы на весь блок целиком, в том числе и при адаптиве.

input без label - в любом случае плохо для доступности. Поэтому оставлять его голым и одиноким не стоит.
Посмотрев на всю форму целиком, можно было бы понять, эти "Ккал, %" это лейбл или нет. Ну и дальше по обстоятельствам.

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

Можно ли сверстать такой блок одним инпутом?

Можно:
<input type="text">
;)

И применить к тексту линейный градиент.

А если серьезно, то нужно нормально описать задачу, почему только один инпут и что вообще происходит на самом деле.

Как из одного input получить несколько переменных с разными данными, чтобы в будещем их сравнить?

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

Но не знаю, зачем такое извращение.

Кстати, у вас у обоих инпутов name="username"

Как расчитывать высоту и ширину элемента .content в коде?

Я уже вам писала в прошлом вопросе: сомневаетесь, отройте браузер и проверьте.
Почему этого не сделать-то?

Но да, верно.

Спозиционировать элемент выше корневого родителя?

Нужно изменить контекст наложения.
Можно попробовать изменить z-index для TableBody.
Но кто знает, какие стили у вас там есть ещё.

В чем разница и почемук не работает last-child?

godsplane, js'ом

Как расположить изображение справой стороны от текста?

doroshchenco, гриды, флексы, в сложно-сочиненных ситуациях абсолюты.

Как расположить изображение справой стороны от текста?

Это не контентная картинка, а украшение.
- Она может быть сделана просто фоном. И тогда у блока нужно сделать правый padding, чтобы подвинуть контент.
- Либо псевдоэлементом. Тогда используйте флексы или гриды.

Что вы уже пробовали сделать и что не получилось. Ваши попытки выкладывайте в песочницу на jsfiddle.net так, чтобы было видно проблему.

В чем разница и почемук не работает last-child?

godsplane,

что является lasth-child во втором примере?

Именно в такой формулировке (т.е. *:last-child) - это будет просто последний элемент.

А вот элемента .item.k:last-child в этом примере не существует. Потому что у последнего элемента нет классов item и k одновременно.

В чем разница и почемук не работает last-child?

Потому что last-child ищет последний элемент своего родителя, но при этом проверяет, совпадает ли он с селектором.

Когда-то давно-давно это работало не так.

Как в Tooltip использовать HTML?

Замените псевдо и data на обычный span (div или что там больше подходит по смыслу).

Как залить фон на 25%?

Александр Андропов, Для progress https://jsfiddle.net/yumvtx4z/

Как залить фон на 25%?

Александр Андропов, я ведь не могла подумать, что вы просто не знаете про background-size
https://jsfiddle.net/erby7Lwq/

Как залить фон на 25%?

Александр Андропов,

Заливает именно степень градиента, а мне нужно что-то примерно из этого:

Я вообще люблю такие вопросы. Сначала спросить одно, а потом допридумывать какие-то условия.

В смысле двойной градиент, чтобы внизу темным было?
Ну задайте ему bg size, чтобы не на всю ширину был, а на сколько вам нужно.

Как правильно указать путь к картинку?

Андрей Годунко,

Я немного подделал ваш ответ под себя и у меня получилось background: url('source/img/background.png');.

Папка source вообще не должна участвовать в пути.
Путь должен быть относительно файла css.
Если стили лежат в папке css, то будет: выйти наверх на один уровень и найти там папку img и в ней картинку.
Выходит: "../img/background.jpg"

Почему на реальном телефоне и в инструментах разработчика отличается отображения сайта?

Если выпирающие части скрыты с помощью overflow на body, то эта конструкция постепенно перестает работать.

Другой вариант, что в эмуляторе тоже есть полоса прокрутки, если подвигать экран.
Третий, что хромы иногда её бережно убирают, не говоря ни слова.

Короче:
обводите все элементы и псевдо рамочками, смотрите что выпирает и чините.