Резиновая верстка сайта на Тильде

Куратор Tilda School Максим Ширко рассказывает, как верстать десктопную версию сайта на Тильде так, чтобы она одинаково хорошо отображалась на любом экране — от небольшого ноутбука до 27-дюймового 4К монитора.

Таймкоды:
00:00 вступление
00:17 как адаптировать контент на всю ширину экрана в стандартных блоках
1:42 ошибки резиновой верстки в стандартных блоках
4:15 как работает выравнивание элементов по grid container
5:09 варианты выравнивания элементов нулевого блока внутри окна
7:16 как работает выравнивание элементов по window container
8:55 как задавать размеры объектов в процентах относительно размера экрана

__________________

Подписывайтесь на нас в соцсетях:

[pgbonob]

Наконец то я стал понимать на 50% лучше про grid/window container и про резину в частности. Хорошо объяснил мужчина..очень хорошо.

[Samed]

Спасибо вам за такую чудесную программу.
Как хорошо, что вы есть

[ImechkoFamiliya]

Спасибо) я теперь поняла в каких настройках был косяк, что при верстке делаю одно, а при публикации - другое 😅

[nety_net_ne]

Ухх, спасли меня! Два монитора, один HD, второй 2К, и 2К монитор сильно срезал мне картинку на заднем плане, очень помогли, чувствую что надо обязательно все ваши видео на канале посмотреть!!!

[ukrnet]

Спасибо, полезно, наглядно и интересно.

[EvgeniiSorokin]

Отличный совет с размерами экранов. Буду закупаться в каждой стране гаджетами на все разрешения. Нужно ведь тестить. И да, про терпение очень хороший совет, его необходим целый поезд при верстке на разные экраны. Надеюсь, придет время, когда Тильда приблизится к Redymag по удобству использования. Ребята, желаю вам продуктивности!

[rjhgpng]

спс за науку...как же крута тильда и как много я ещё не знаю..

[NadiykaAkymova]

Класс, как круто )) Спасиибо огромное!!!))

[igormosijchuk]

Также в настройках размеров, значення можно указывать с комбинированными единицами измерения (например 100vh - 100px), может иногда приготдится

[lordelias]

огромное спасибо, очень сильно помог)

[msdkmee]

Макс, красавчик! Спасибо за пиксели, которые можно превращать в проценты. Это прекрасно)

[mxmzubov]

как я долго искал эту информацию про 550 пикселей

[Nsdimon]

Макс ты как всегда достоверно объясняешь. Молодец !

[fizzybubblech]

Нбать да ты зверюга!! Красота то какая сказка! Вот ето лапиищи!

[zohan]

Только интенсив досмотрел 6-часовой с вами, доволен как слон, переделал полностью два своих проекта за одну ночь, все блоки сделал в зеро, заказчики в шоке, я в шоке, сделал им это бесплатно, так как учился на них. Спасибо вам✌🏼👍🏻

[ruslanzdor]

Было бы очень полезно сказать и показать, что в самом браузере вы можете увидеть как сайт выглядит на других расширениях, просто нажав просмотреть код и выбрав нужное расширение. Это бы намного упростило задачу поиска различных мониторов

[nanofox]

почему вы не обьясняете как верстать так, чтоб смотрелось и на десктопах нормально и на мобильных устройствах, если делать windows container, то в мобильной версии, идут белые пробелы между блоками, выпустите нормальное видео как правильно верстать в компьютерной версии и в мобильной версии.

[katni]

Это действительно самое тяжелое в верстке😫 Ну лично у меня вечно затуп с этим window container

[jnnccwp]

Такой вопрос: как адаптировать текст соразмерно экрану при резиновой верстке? Условно если текст 16px на макбуке 13-м, как сделать так, чтобы и на аймаке 27 этот текст был пропорционален остальному контенту так же, как и на макбуке? Явно размер у него будет уже на 16px..

Заранее спасибо за ответ!

[kcmklnc]

Было бы круто, если бы можно было ставить дополнительные размеры экранов на десктопе например добавить full hd версию