Отзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером.

Часто бывает, что в макетах дизайна объект выходит за пределы сетки (ограничивающего контейнера). Я придумал интересное решение и хочу с тобой поделиться.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Сталкивались с таким? 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@InspireInki]

Подскажите, как понять к какому блоку задавать то или иное свойство? Как не запутаться во всех вложенностях? И как понять сколько всего надо добавить элементов div перед самим содержимым?

[@AlexeyKhachaturyan]

Было бы не плохо добавить не только по классу но и по id определять уникальный элемент) это Я про github.com/FreelancerLifeStyle/dynamic_adapt

[@GANGST1ER]

Почему-то по формуле изображение всё равно внахлёст. Уже несколько раз переписал. В чём может быть проблема? Даже строчка в строчку по видео.

[@ilgizreklama]

@@GANGST1ER возможно где то лишний или недостающий "} " , У меня однажды из-за одной лишней скобки пришлось долго помучаться

[@ilgizreklama]

@@InspireInki Когда не знаю какая вложенность боков надо или тяжело представить последовательность в голове, то просто беру бумагу и начинаю набрасывать варианты )))

[@svhanz]

Блин! Есть у меня некое предчувствие, что никогда мне в ногу с Жекой не идти! Я еще кучу годноты с прошлого года не изучил, а он тутор за тутором производит и производит! Кто-то может вспомнить, у кого еще такая же бешеная продуктивность, да еще и мега толковая? Вот чтобы не просто языком почесать и показать типа- Смотрите как я умею, а выпустить именно толковый контент, с классной подачей и детальным разбором происходящего в ролике. Спасибо за очередную работу!

[@FreelancerLifeStyle]

Пожалуйста! Рад что полезно!

[@BohdanVR666]

Я не понимаю, так мало подписчиков потому что слишком годный и полезный контент? Это же рай для начинающих (да и не только) верстальщиков

[@lilrepa3125]

Смотрю твой канал с самого начала своего пути в вебе, спасибо тебе за все, что ты делаешь. Ты очень помогаешь начинающим разработчикам, твой опыт и наглядные примеры решения проблем - бесценны. Продолжай в том же духе, твоя аудитория с тобой.

[@FreelancerLifeStyle]

Спасибо большое!

[@MrSvitS1337]

Оо я пару дней назад верстал по макету подобный сайт, я так намучился с этим, сказал дизайнеру что у него беды с башкой, а оказывается это у меня

[@FreelancerLifeStyle]

Ахах)

[@MilenaAdelin2207]

😄

[@al77ex1]

Ох и заковыристая это всегда была задача. Очень хорошее решение! Посмотрел с большим интересом.

[@FreelancerLifeStyle]

Спасибо!

[@doomymax577]

Мне кажется Евгений для меня стал единственным полезным верстальщиком во всем ру ютубе

[@FreelancerLifeStyle]

Спасибо!

[@БажевЗалимхан]

Большое спасибо за такое полезный видеоурок! Ни в одной книжке так не расписано с примерами и подводными камнями! Спасибо огромное за столь проработанный материал! Ещё раз спасибо "Сэнсэй"!

[@FreelancerLifeStyle]

Спасибо!

[@Sweet_and_joy]

Тяжелооо... что-то я где-то упустила🤔 в обучающем курсе...Будем разбираться🧐😁 поэтапно💪👍 а разбираться хочу, потому что скопировать может каждый, самое главное - понимать суууть

[@kirillv4205]

Лайк и комментарий. Таких видео должно быть больше.

[@Mani_Fast]

Согласен меня очень мотивируют видосы

[@FreelancerLifeStyle]

Спасибо!!

[@BMikel]

Мне дико нравится это... "у нас все, казалось бы, классно работает, НО.... " и дальше пошла жара. Люблю такое.

[@КонстантинКарачинский-и3ъ]

Евген, ты меня каждый день спасаешь! на все вопросы ответы у тебя нахожу! спасибосики огроменные, жму руку!! F

[@FreelancerLifeStyle]

Я рад!

[@evgeniysalabaykin7201]

Спасибо за полезное видео! Реально полезное, я как раз делаю сайт и возникли проблемы с таким блоком, в итоге фото сделал как background, и через background-size/background-position менял размеры и тд потом через media подгонял под разные экраны ... итоговым результатом я не остался доволен. Сейчас буду переделывать этот блок по твоему видео! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@СергейТерещенко-р8н]

Женя спасибо за видео.

[@FreelancerLifeStyle]

Пожалуйста!

[@alexkam8934]

С бубном я уже потанцевал))) Красавчик! И весело и по делу.

[@FreelancerLifeStyle]

Спасибо!

[@Mani_Fast]

Классные видио продолжай в том же духе МОЛОДЕЦ в будущем я поддержу канал!

[@FreelancerLifeStyle]

Спасибо!

[@СергейЖариков-ю2ъ]

Oчень полезная фишечка по адаптиву!!! Автор красавчек!!!

[@FreelancerLifeStyle]

Спасибо!

[@СергейПлотников-к4ю]

Женя, спасибо за видео! Прям очень спас, вчера весь день на работе просидел с такой проблемой, сегодня за пару часов с твоим видосом сделал. У меня на макете две таких секции, одна со слайдером, другая с интерактивной картой вместо картинки. Проблем не возникло, все работает по твоей схеме адаптивно.

[@winsol5103]

Наимощнейше? - КОНЕЧНО! спасибо за твои труды )

[@FreelancerLifeStyle]

Пожалуйста!

[@dimasavchenko9150]

Только ночью верстал такой блок)) правда, до адаптива не дошел. Как раз вовремя, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@артуршмаков-е4з]

Отличный контент!!! Все примеры вёрстки сохраняю на будущее . Спасибо за всё

[@FreelancerLifeStyle]

Пожалуйста!

[@jiza2377]

Самые больные темы верстальщика затрагиваешь, очень круто!

[@FreelancerLifeStyle]

Я рад)

[@subaruforester8332]

Вот именно это я и искал! Очень круто и огромное спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@ПетроДубчак-я8д]

Спасибо тебе Жека огромное!!! Крепкого тебе здоровья и ручки чтоб не болели... :-)!

[@FreelancerLifeStyle]

Спасибо!

[@ilya2839]

Ааааааааааа с ума сойти, три дня пыхтел над такой задачей и думал как-же всё таки будет правильно. А оказывает на моем любимом канале решение было, причем через гугл случайно наткнулся. Спасибо тебе огромное за такую важную информацию !

[@Ferisol]

3 дня эт ерунда я неделю мучился правда я в этой теме всего 2 недели но всё же так долго решать даже для новичка зазорно и удачи с проектоми.

[@123arwel]

Как всегда, шикарно)) Спасибо!

[@FreelancerLifeStyle]

Спасибо!

[@ВиталийРябенко-з1ь]

Спасибо большое за то что делишься знаниями !!!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-expert_2023]

Очень классное решение! Спасибо Женя!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@soya-untara.9434]

Наконец-то справился :) Спасибо Жека! И людям что в комментариях пишут у кого-то подцепил похожую проблему, у другого её решение :)

[@anatolygalkin1323]

Спасибо большое, отличная работа, однозначно в копилку! Я только добавил для .section__container ширину 100%, с малым контентом сжимался контейнер.

[@FreelancerLifeStyle]

Вариации безграничны, главное это надежность

[@gerompauel]

Это единственный канал, где я нашел годное решение данного вопроса

[@ЕвгенийБаркас]

Спасибо, за новый скилл нам)).

[@FreelancerLifeStyle]

Пожалуйста!

[@ТатьянаКалукова-е6ф]

Очень круто!! Спасибо за материал и за возможность решить задачку с переворачиванием картинки и текста, пришлось хорошо разобраться в материале чтобы понять как ее решить. оказалось все очень просто.

[@JUN-17]

Но ведь, если ширина экрана будет большой (больше 1360px), например 4000px, то всё будет выглядеть очень плохо.

[@МаксимМаксим-р2ф]

Просто лучший!

[@veaceslavbalanetchi8347]

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

[@ЖуранськийЄвгеній]

Как раз такая-же ситуация была. А выход оказался под рукой!)

[@ilyaprotsenko1023]

Женя, красно тобі дякую! Щоб я без тебе робив!

[@konstantino7016]

Очень интересно и познавательно! Спасибо Женя за классный урок👍

[@FreelancerLifeStyle]

Пожалуйста!

[@YarkiiYa]

Спасибо! Отправляем тебя в тренды !!!!!!! PUSH

[@FreelancerLifeStyle]

Спасибо!

[@stra1f595]

trend.push("Фрилансер по жизни - IT и фриланс");

[@zizzxiii2714]

С первого заказа с фриланса стану патроном

[@FreelancerLifeStyle]

Спасибо!

[@MilenaAdelin2207]

Ну що тут скажеш, контент як завжди на висоті по користі , подачі. Дякую 👍

[@FreelancerLifeStyle]

Будь ласка

[@egorburunkov3842]

Никак не могу дойти до решения реализации обратной ситуации (изображение - слева, контент - справа)

[@const1525]

Нашел?)

[@deckards6288]

@@const1525 Та же фигня, сейчас пробовать буду)

[@const1525]

@@deckards6288 Если получится, отпишись))

[@deckards6288]

@@const1525 в случае с картинкой помог пример из комментов: vitya8989.github.io/padding/. А вот если тебе нужно блоку с текстом, фон сделать на всю ширину, а сам текст по контейнеру выравнять, это не поможет.

[@const-shish]

Евгений, благодарю

[@FreelancerLifeStyle]

Пожалуйста!

[@ОлегИльченко-о9ц]

Ты - гений! Сильно помог с моей проблемой. Спасибо!

[@kotlancer]

Сегодня использовал твоё решение в проекте, всё работает, как часы! Респект, Женя, давай еще! :))

[@MaximVernigorov]

Это просто взрыв мозга! Но это то что я искал , спасибо!

[@mykolahaliuk254]

Одразу лайк і комент!!!

[@FreelancerLifeStyle]

Дякую!

[@antonshcherban2100]

Евгений дай Бог здоровья тебе и твоим близким, многих верстал ты вывел из депрессии )))

[@АртемКа-в3к8й]

Жека, как всегда видос на высоте))) Если кто-то скажет за вложенность, никого не слушай, они не шарят в его силе)))

[@FreelancerLifeStyle]

Ахах, та пусть говорят что хотят)

[@АртемКа-в3к8й]

@@FreelancerLifeStyle верно)

[@НиколайТурист]

Годнота!) супер, спасибо, Жека 😊👍

[@FreelancerLifeStyle]

Пожалуйста!

[@ЮрійДмитрик-в9в]

Дякую тобі, це надзвичайна інформація, якої я більше ніде не зустрічав, це факт!🫡

[@volodyanalamaf9188]

Жекич лучший!

[@FreelancerLifeStyle]

Спасибо!

[@Мертваяматьсекрета]

Как же сделать картинку слева, а контент справа? Пожалуйста, помогите

[@nazararchakov8903]

тоже мучаюсь и не могу понять))

[@ViTheBraviest]

Сначала пишешь див с картинкой, а потом див с body. Просто порядок меняй и все

[@arturka9125]

flex-direction: row-reverse

[@lanash1055]

html-структуру оставляем такой же; в css для блока .section добавляем flex-direction: row-reverse; для картинки применяем transform: translate(100%, 0px); вместо transform: translate(-100%, 0px); вроде, так получается перевернуть

[@sharomet]

Круто. Спасибо. Я когда-то мучился с подобными блоками. Я заметил небольшую проблему: при появлении скрола у страницы, блок с картинкой смещается влево на несколько пикселей. Это видно если сравнить этот блок на странице со скролом и без. При 40/60 это не заметная проблема, но если использовать 50/50 то чётко видно что блок не по центру относительно всего контента. Возможно нужно заменить vw на проценты Я исправил это вот так: flex: 0 0 50%; // Для 50/50

[@ПожизненныйСильвер]

Я добавил в конце calc такое выражение "- (100vw - 100%) / 2", где 100vw - 100% для боди высчитает ширину скролла (это 17px в хроме), а делить на 2 нужно, поскольку margin слева и справа уменьшатся равномерно, а значит контент в контейнере уедет влево всего на 8,5px (17/2). Объяснять это не мое, но я пытался) Главное, что работает и для 50% и для 60%, и любых других. Например для (min-width: 1240px): было flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px)); стало flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px) - (100vw - 100%) / 2);

[@KindCat21]

Жека, как всегда лучший! Спасибо тебе! Но есть вопрос: где взять мотивацию в нынешнее время, чтобы не забросить поприще верстальщика?

[@FreelancerLifeStyle]

Может тут что поможет kzbin.info/aero/PLM6XATa8CAG5tj86KRCFVbPodt5TGQEF9

[@Димитрий-п1к]

Привет,очень понравился твой ролик. Контент как всегда на высоте) Хотелось бы подкинуть идею для видео,например,мне интересно посмотреть туториал на эту темы в твоем оформлении: Как сделать прелоадер,каким образом его можно анимировать,подключать и т.д Как по мне очень интересная тема для разбора,буду рад если выйдет ролик с ней. Удачи))

[@vollex_frontend]

СПАСИБО, ЧТО ТЫ ЕСТЬ!

[@energiekost]

Жека, спасибо большое!! Ты крут!!! 🔥💪

[@FreelancerLifeStyle]

Пожалуйста!

[@dmytro_b4]

Спасибо за видео. Огонь 🔥. Правда не с первого раза всё получилось. Всё повторил, но пока не установил для section__container свойство width: 100% изображение так и налазило на контент (для 40% и 60%). А в видео всё прекрасно работало и без этого. Так и не понял почему(

[@СтасБублик-ы1и]

Ты просто чудо!

[@FreelancerLifeStyle]

Спасибо!

[@AlinaDotsenko-d6q]

Спасибо за мега-крутой и полезный урок! 😎💪

[@brodyagaPATY]

Огонь 🔥🔥🔥🔥🔥🔥🔥 спасибо Жека🙏

[@FreelancerLifeStyle]

Пожалуйста!

[@alexanderyastrebov6815]

Возможно я не прав. Но у меня тот же эффект достигается если про контенту задать flex не 100% а поделить их поровну с картинкой(либо в тех пропорциях которые необходимы). При всём при это не нужны ни transform: translate ни calc ни танцы с бубном))

[@ye5275]

Огромное спасибо! Просто супер решение!

[@jangow5716]

Женя, спасибо за видос. А как быть если картинку нужно разместить слева, а контент справа?

[@leonardrutto8381]

блоки местами поменять

[@xenokskings2201]

@@leonardrutto8381 так не получается почему-то...

[@i_am_Kamil]

@@xenokskings2201 Можно поменять с flex свойством flex-direction

[@shake4970]

@@i_am_Kamil не работает так

[@dimadiv6583]

Месяцев 5 назад первый раз ознакомился с данным видео. А научился делать только сейчас, пришлось на заказе внедрять. Только вот картинка была слева и были некоторые отличия в подходе.

[@DogSayWaf]

Просто лучший!!! Срочно открывай свою школу!

[@FreelancerLifeStyle]

Спасибо! Курс попросьбе зрителей планируется на осень

[@popovvv]

Каеф. Привет из Сум!

[@volodymyrpasenchenko5338]

Мені здається, що з формулою все набагато простіше. flex: 0 0 calc(50vw - (0.4 - 0.5) * 1320px) = flex: 0 0 calc(50vw + 132px)(просто підрахувати). По центру екрану розташований контейнер 1320рх(згідно макету). Слайд повинен в ньому займати ширину 60%(50% + 10%). При збільшенні екрану з 1360рх нам просто потрібно до 50vw додавати 10% від нашого контейнера(1320*0,1 = 132рх). Таким чином набагато простіше рахувати. Треба, на приклад, 70% слайду бачити в контейнері - просто до половини екрану додаємо вже 20%, від контейнера flex: 0 0 calc(50vw + 264px). Розрахунок: 1320*0,2 = 264рх.

[@tochcha2971]

Дуже потрiбна реч!

[@toplemon8045]

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

[@PavelM01]

Класс! Чудеса математики ))) Спасибо

[@tommyhellerhound]

Жека, спасибо, лайк!

[@FreelancerLifeStyle]

Пожалуйста!

[@yuriy2109]

Спасибо! Все повторил. Получилось. До этого пытался использовать Ваши формулы для изменения ширины элементов, где первоначальной единицей измерения (первое значение в формуле рх), пробовал изменить на vw, мне так нужно было. Но формула, не захотела правильно работать. Наверное что-то с взаимодействием единиц измерения. Пока не разобрался, оставил px.

[@ВикторКомаров-п9к]

Написал полностью новый вариант решения, контейнер выделил синим, скролла нет, картинка себя ведет практически так же как на видео. Блоку с текстом задал min-width: 40%; , а блоку с картинкой flex: 0 0 60%; и min-width: calc(60% + ((100vw - 1360px) / 2)); Cобственно, процентовка соотношения текст-картинка задается только в этих местах. Для примера вставил разные картинки, свойства одни и те же. Абсолютное позиционирование не использовал. Решение по ссылке vitya8989.github.io/padding/ , что скажете?

[@evgeniyprowork]

на codepen выложи код, интересно увидеть другое решение

[@lew_milow]

интересный пример

[@niceman5890]

Спасибо

[@mew6085]

Гениально, в этом ролике я узнал что в CSS оказывается математика есть )

[@FreelancerLifeStyle]

Есть)

[@ЭдуардМусатов-т7р]

О контент)

[@FreelancerLifeStyle]

Ага)

[@Olga-gb8vz]

зубодробительная штучка. спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@modusvivaldi7701]

Крутое решение, особенно калькуляция в конце. Спасибо! Как дополнение: раз уж мы используем object-fit и, стало быть, не поддерживаем IE, то можно параметризовать ширину контейнера (которая 1320px) и горизонтальные padding'и с помощью custom properties, calc станет нагляднее. И любопытный момент: после сдвига .section__image с помощью transform: translateX(-100%) горизонтальное переполнение у меня исчезло само собой, накидывать overflow-x: hidden на .section не пришлось. Интересно, почему. Chrome 85, Firefox 81.

[@igryanulgrom7748]

может все-таки flex: 0 0 calc(50vw + (% - 0.5) * (widthcontainer)); для @media (min-width:widthcontainer) потому, что если минус, то с 40% ширины картинки например, получится flex 0 0 (50vw - (отрицательное число)) или flex 0 0 >50vw P.S просто у вас для min-width 767 картинка 60%, а далее везде 40%..

[@IT_psychopath]

класс, спасибо! теперь мне опять есть чем заняться, попробовать тоже, но найти другое решение. по мне, так это лучший способ учиться - всегда пытаться превзойти свое учителя. а не повторять строка в строку.))) у меня дивиз по жизни прост -"если у кого-то это не получилось, это еще не значит что это невозможно!", тобишь, надо попробовать сделать то, что другие не смогли а не тупо повторять за другими..

[@FreelancerLifeStyle]

Супер, буду ждать решение!

[@maksimlegit5264]

только реализовал решение легче, с одной функцией calc() на весь код

[@evgeniyprowork]

@@maksimlegit5264 так поделись кодом на codepen

[@andriusadomaitis8073]

У vw есть проблема - она учитывает ширину вертикальной полосы прокрутки

[@ytachkadak7599]

лучшие видосы! ты ТОП!

[@FreelancerLifeStyle]

Спасибо!

[@andrijkotscherga1705]

ДЯКУЮ це те що я шукав

[@ИгорьГорбунов-ю9ж]

Благодарю Вас за видео.

[@ВикторКомаров-п9к]

Решил немного по-своему. Сделал обычные две flex-колонки, блокам с картинкой задал box-sizing: content-box и для блока с первой картинкой padding-right: calc((100vw - 1320px) / 2;. Для второго блока с картинкой, соответственно, padding-left. Но, чтобы работало влево, нужно использовать flex-direction: row-reverse; у блока второй строки. Если просто в html поменять элементы местами, то картинка будет тянуться, но выталкивать текст вправо из контейнера. А с row-reverse работает) Вот ссылка на github pages: vitya8989.github.io/padding/

[@FreelancerLifeStyle]

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

[@ВикторКомаров-п9к]

@@FreelancerLifeStyle Написал полностью новый вариант решения, контейнер выделил синим, скролла нет, картинка себя ведет практически так же как на видео. Блоку с текстом задал min-width: 40%; , а блоку с картинкой flex: 0 0 60%; и min-width: calc(60% + ((100vw - 1360px) / 2)); Cобственно, процентовка соотношения текст-картинка задается только в этих местах. Для примера вставил разные картинки, свойства одни и те же. Абсолютное позиционирование не использовал. Решение по ссылке vitya8989.github.io/padding/ , что скажете?

[@bestlife9681]

Приятно смотреть и слушать профессионально до мелочей Если был рейтинг у вас было бы достойное место . Есть одна просьба расскажите по какому принципу пишутся названия классов и вложенности в них. Не могу продвигаться в обучении пока не пойму все мелочи которые определяют качество на сколько я понимаю. Заранее спасибо !!

[@FreelancerLifeStyle]

Спасибо, о нейминге тут kzbin.info/www/bejne/fprLioSMqq1parc

[@bestlife9681]

@@FreelancerLifeStyle спасибо !!!!!!!!

[@vadym7023]

норм решение) а вы чекали кроссбраузерность в Эдже или в десктопном Сафари? (за ИЕ молчу)

[@FreelancerLifeStyle]

ЭДЖ без проблем, ПК сафари под рукой нет (я на винде) но тут ничего такого нет, должно работать)

[@ЮрийРудь-ш4г]

Супер!!! Я наверное так никогда не смогу...(((

[@ББогдан-м7н]

Жек,ты используешь бутстрап,или пишешь медиа-запросы?

[@FreelancerLifeStyle]

Медиа

[@ДмитроМалішенко]

Ніфіга не зрозумів, але цікаво і виглядить кльово. Треба пальчиками повторити те що в відео - тоді дійде. )))

[@dobryden7196]

Блин я ещё на 1.5 скорости смотрю, и как будто это всё искусственный интеллект делает. Надеюсь перед видео он это делал в 10 раз дольше и ломал голову как и я :D

[@sakinurs3084]

Ребят у меня проблема возникла при верстке этого урока! на 8:04 Жека ставит на section__content свойство display:flex. Но когда я ставлю у меня контент ставится по середине(то есть, и текст и тайтл ровно по середине страницы, а мне это не нужно) В чем проблема? Кто знает можете объяснить? Заранее спасибо

[@АлександрЧернов-х2у1и]

Если посмотреть других блогеров, у которых есть онлайн школы, то можно поверить в их слова о том, что первые деньги с верстки можно получить через неделю после начала обучения. А потом смотришь видос от Жени Андриканича и понимаешь, насколько всё не так, если ты хочешь быть хорошим специалистом)

[@mirzomuminsobirjonov1104]

Привет Жека, классный видео получился.Спасибо...а будет видео по валидации формы?

[@FreelancerLifeStyle]

Будет!

[@наталіяклемишова]

👍👍👍

[@FreelancerLifeStyle]

Спасибо!

[@valentine.samoylov]

Отличное видео! (Я даже знаю где я смогу это применить 🤔☺️)

[@FreelancerLifeStyle]

Супер!

[@redsm0ke19]

Решение действительно классное, спасибо большое! Есть только один вопрос, данным методом можно ли как то ограничить высоту самой картинки, ведь сейчас она регулируется падингом ? К примеру на макетной ширине все смотрится круто, но когда разрешение экрана по ширине, к примеру, 4000px то картинку расфигачивает по высоте чуть ли не на весь вьюпорт, а текст как был своего размера, так и остался. Я понимаю что можно сделать адаптивный шрифт, что бы он тоже увеличивался пропорционально вьюпорта, но тем не менее, можно как то ограничить картинку по высоте ?

[@ПожизненныйСильвер]

Можно убрать падинг у .section__image и задать нужною высоту для .section__content через свойство min-height. Тогда фотка будет под контент подстраиваться, а не наоборот