Тогда 2 варианта, которые на ум приходят:
1. grid
2. обертка display: flex, justify-content: space-between.
красный блок без всяких оберток - width: calc(25% - ширина отступа)
Откажитесь от флекса на вертикали (браузер дивы и так разложит как надо), проверьте все отступы, проверьте box-sizing на элементах с паддингами. Флекс может сыграть дурную шутку.
Проверьте все размеры. Если Вы используете высоту в 100vh, попробуйте привести к этим же единицам измерения и остальные блоки. В разных телефонах будет разная высота.
Затем что у вас внешний блок имеет отступы, а у блока intro заявлено 100% ширины. Если у внешнего блока не задана явно ширина, то intro пойдет за данными о ней выше.
Покажите что у вас в класс вписано.
На section таба надо добавить max-height со значением и оверфлоу, как предложил Михаил. Тогда при переполнении по высоте будет появляться скролл.
ммм, костыли и хардкор тогда, в вашем понимании - любой js фреймворк :)
Они так и работают, получают с апи данные и раскладывают в генерящуюся на лету разметку :)
Ankhena, маленькое замечание: если стики позволяет добиться нужного результата, то я за полифил, подключаемый через определение браузера, и нативный css.
"Все равно подключать скрипт" - далеко не проще сделать скрипт с нуля, да еще и кроссбраузерный. Трудозатраты несоизмеримы, а в случае с недостатком опыта - выстрел в ногу можно схлопотать.
Для мобильного вида я бы предложил аккордеоны, к примеру, вынес бы меню для мобилы в выдвижной сайдбар, отвязал от десктопной реализации. Но это голословно, не зная ваших требований и проч.
Десктопный вариант - можно посмотреть реализацию сложных сайтов типа сетевых магазинов (dns, ulmart, citilink etc). Там проводилась большая работа по юзабилити.
UI/UX дело сложное и дорогое обычно. Для самообразования - смотреть курсы, читать руководства к применению готовых концепций типа material ui гугла и аналогичных.
Стоит опираться на решения крупных компаний, они в это денег вбухали много :)
изменение пропсов заставляет компонент заново выполнять рендер. Запрос у вас асинхронный, потому и происходит не сколько рендеров (это еще и из-за других пропсов может происходить)
Можно повесить в componentDidUpdate проверку этого значения и как только оно получено - производить его обработку.
Ну или любой другой способ работы с измененными данными.
Сделать можно, но это большая нагрузка на расчеты.
Пример: есть у вас меню 1 уровня со скроллом.
Если есть скролл - значит элементы внутри блока наружу уже не смогут выскочить (используя position relative родителя), их будет обрезать контейнер. Соответственно новых потомков придется лепить за пределами меню, используя расчеты положения родительского пункта меню относительно краев окна браузера, позиционировать абсолютно + дополнительно реагировать на скроллы, на потерю фокуса родительским пунктом меню и прочие нюансы (кроссбраузерность, проверка перехвата событий и т.д. и т.п.). Опять же - раскрытие меню по клику или по ховеру?
Всё это вырастает в непозволительно сложный алгоритм, который говорит, что хорошо бы изменить UX в навигации. Либо искать готовую реализацию в виде давно оттестированного плагина (не могу припомнить, извините).
Вы не с той стороны взялись за приготовление пирога.
Для правильной работы вашей верстки на мобиле с такими отступами - добавьте в CSS mediaqueries для данного разрешения и измените стиль, измените отрицательные отступы, скорректируйте верстку чтобы она не зависела от масштабирования.
Масштабирование - это плохой кейс. И не управляемый.
А гиф, между прочим, нельзя использовать еще и по лицензионным ограничениям. Решайте через svg.
В svg хранится векторная графика (которой всё равно на разрешение), стилями в css с помощью keyframes создаете зацикленную анимацию атрибутов.
Это самый актуальный вариант.
Цитата:
"Очень заманчиво предполагать, что любые стили, которые должны быть унаследованы на протяжении всего документа, следует задавать прямо для html, потому что это корневой элемент документа. Элемент html превосходит элемент body по иерархии, поэтому было бы логично, чтобы именно для него задавались все глобальные стили.
Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:"
background
bgcolor
marginbottom
marginleft
marginright
margintop
text
1. grid
2. обертка display: flex, justify-content: space-between.
красный блок без всяких оберток - width: calc(25% - ширина отступа)