Rustam Bainazarov

Проблема не в таблице (что вам и показал вынос кода в песочницу), проблема выше -- в общем контейнере.

@media screen and (max-width: 750px)
    .science__wrap {
        /* flex-wrap: wrap;  -- не нужно тут это */ 
        flex-flow: column;  /* вот это нужно; нужно сменить ось flex'а */ 
    }
}

Что-то на самом деле тупишь:

Это из-за flex.

Решение вот такое:

@media screen and (max-width: 575px) { /* Ваш медиа-запрос */

    /* Нужно создать элемент в конце списка. Проще всего это сделать с помощью псевдоэлемента */
    #reviews .reviews_wrap:after {
        content: "";
        flex: 0 0 10px;  /* вместо 10px -- нужное вам значение «отступа» (который не отступ на самом деле, но вы поняли) */
    }

}

Представленный выше код, что называется, overkill.

Сам использую подобный, но с pointer-events: none; visibility: hidden; и без white-space и clip-свойств. Надо тоже их добавить, хорошая идея :))

Upd. Хотя вот так будет лютый overkill:

.is--visually-hidden {
	position: absolute !important;
	visibility: hidden !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(100%) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	text-indent: -9999px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

Только что там с accessibility -- фиг его знает. Тут уже жду комментариев, если они будут.

Update. Если кто не понял, мой код -- это сборная солянка всего что только можно для прикола. Кода из картинки автора вопроса вполне достаточно.

Конкретно как там — делать не стоит. Там анимируется с помощью свойства top, поэтому все глючит и скачет с 10-ю кадрами в секунду. Анимировать такие штуки надо с помощью translate3d, чтобы задействовать GPU. Почему translate3d, а не translateX? Потому что анимирование c с помощью translateX глючит (идет с рывками) в IE11, первых EDGE и старых Firefox, если сочетать с transition для эффекта инерции.

Один из таких плагинов, который делает это нормально:
https://dixonandmoe.com/rellax

Он анимирует как раз с помощью translate3d. У меня есть положительный опыт работы с ним. Но не переусердствуйте :))

Update: Хотя я и за плагин выше, потому что он сильно упрощает задачу по позиционированию, инициализации и изменению скорости параллакса, но обратите внимание на ответ Максим Ленский касательно метода без плагина.

Дополняя ответ Максим Ленский и совмещая его с translate3d, можно сделать так. Код ниже содержит много лишнего CSS, потому что он из проекта вырван. Скорее всего, JS тоже весьма примитивен (ибо я писал), но суть алгоритма ясна:

Табы по клику нужны, чтобы как раз-таки ограничить необходимость прокрутки. У вас уже по сути не табы.

Представим ситуацию. У вас после блока с табами ещё куча информации (слайдеры с доп. товарами, кросс-товарами, ещё там что-то). И вот чтобы достичь эту информацию, нужно прокрутить все-все табы.

Наверное, сама идея таких табов (хотя это не совсем табы) имеет своё право на жизнь, но всё зависит от контекста того дизайна и функционала, в котором они будут располагаться.

У вас получился синтез таба и той штуки с заглавием блока, который на экране (не знаю, как называется, примерно вот это). От табов — скрытие контента других табов и фиксация начала контента табов в одном месте, от второй штуки — идея прокрутки и индикация текущего смыслового блока.

Скорее всего, такая реализация будет путать, но надо тестировать, конечно. Массовый пользователь привык либо к табам, либо к прокрутке.

Прогоните CSS через Autoprefixer с параметром:
>100%

Тем самым получите на выходе вот такой результат:

Box-shadow, а не border-top:

Дополнительного ПО не нужно.

· можно просто напрямую скинуть ссылку на весь проект (пример), которая открывается в современных Chrome и Firefox (Safari ни разу не пробовал)
· можно настроить командный доступ для совместной работы
· можно экспортировать в JPG, PNG
· можно сделать экспорт файла проекта (.FIG)

Update: если дать ссылку, у верстальщика не будет возможности посмотреть свойства, цвета объектов, не будет возможности экспортировать иконки, картинки и т. д. Поэтому самый оптимальный вариант — совместная работа или файл (если дизайн не будет претерпевать дальнейших изменений).

Update. В 2021 году уже можно спокойно всё смотреть и т. д. без прав редактирования

<a href="#" onclick="javascript:window.location.port=8083">Панель VDS сервера</a>

Просто ссылкой нельзя.

На чистом CSS — нельзя.

Можно через препроцессоры.

Image comparison slider.

https://juxtapose.knightlab.com

https://koenromers.com/cocoen/demo.html

Скорее всего это функция сборщика (или иной программной надстройки, или визуального редактора), который считает по формуле, сколько конкретный блок текста займёт места на экране и ставит в готовый билд эти значения. А-ля жёсткая макетизация на новый лад. Знаки после запятой нужны для точности рендеринга (чтобы округление не влияло на визуальный результат).

Если просто тупо использовать vw, то это плохой метод для создания адаптивности на сайте.

Данный метод (просто vw) можно и нужно использовать только тогда, когда нужно умещать конкретный текст в первозданном виде на все экраны (кол-во строк, переносы, кол-во символов и т. д.). С адаптивность эта идея не связана вовсе, не понимаю, почему её некоторые форсят.

Есть вариант такой:
https://css-tricks.com/snippets/css/fluid-typography/
Это старый и известный метод, у него есть свои преимущества и сценарии использования, но опять же в целом на сайте я не знаю, чем не угодили те же em, rem да даже px.

P. S. Ну а пример выше не умещается на экране телефона даже со всеми этими ухищрениями, хотя, видимо, призван делать именно это.

Update. Подумал, что там постоянно разные значения в CSS-файле, поэтому запутался немного в показаниях. Посмотрел, значения не меняются на разных экранах, файл mediaelection.com/css/common.css остается нетронутым. Нет «оверайда» стилей на фронтенде. Словом, то может делаться, например, в визуальных конструкторах (индивидуальной разработки) на том же React, либо через иное решение на том же React, которое заранее просчитывает размер того или иного элемента в зависимости от ряда параметров. Крупная студия вполне может позволить себе разработку такого решения для внутреннего использования.

Update 2. Ну или, как отметили Сергей delphinpro и tyzberd, можно по формуле в препроцессорах считать, сверяя результат визуально вручную.

Это называется высотой строки (свойство line-height).

Вы можете прописать высоту строки самостоятельно. В данном примере высота строки вычисляется автоматически на основе высоты шрифта. Высота строки шрифта обычно больше его реальной высоты. Сделано это для того, чтобы шрифт не слипался, если текст в две и более строки.

Более того, я не знаю, что у вас в макете и как это должно выглядеть, поэтому могу понять вас неверно. Но если я правильно понял, отступ сверху нужно задать у родительского блока с помощью padding, либо у этого h1 с помощью margin-top.

P. S. Описанный MaxKorz метод предназначен для нивелирования влияния высоты строки на верхний отступ текстового блока от границы родительского блока.

Никаких float'ов и лишних обёрток...

Так задайте свои стили для h1.

h1 {
  font-size: 16px; /* ну или что там у вас тут будет; inherit, em, rem */
  font-weight: normal; /* сброс начертания до обычного */
}

Код выше будет работать для всех h1. Если не хотите, делайте более специфичный селектор, опираясь от класса обёртки-родителя, т. е. смотрите вашу разметку.

На всякий пожарный случай:
https://learn.javascript.ru/css-selectors.

P. S. Номинант на премию «Вопрос-ответ года».

Так или иначе упрётесь в потребность использовать Sketch, чтобы сделать/поправить Sketch-макет и не встретиться с проблемами интерпретации sketch-формата другими пакетами типа Figma, Zeppelin и т. д

А Sketch доступен только для MacOS. Вот и ответ. Чем диагональ больше, тем лучше, конечно. За 13-дюймовом экраном работать вполне реально, меньше — с натяжкой.

Кроме того, если есть возможность, имейте запасной дешёвый ноутбук с плохим, но типичным экраном, потому что большинство людей работают (и будут смотреть ваши сайты) именно на таких устройствах. Я сам встретился однажды с проблемой, что люди попросту не видели ту красивую тень от блока (и многие другие вещи), которая прекрасно видна на экране моего Macbook Pro 15, но не заметна типичным пользователям ресурса, дизайн которого я делал.

МальчикДевочка
СобакаКошка
ПёсКот

LOLOL.

По делу: где код?

Элемент с display: none не может в принципе занимать место в разметке, потому что он как бы полностью исключён из потока вёрстки.

Update. Место остается из-за двойного <br>. Выйти из ситуации можно хоть так, к примеру:


Или так:

br ~ br {
    display: none;
}

.