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

[@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]

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

[@doomymax577]

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

[@FreelancerLifeStyle]

Спасибо!

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

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

[@FreelancerLifeStyle]

Спасибо!

[@MrSvitS1337]

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

[@FreelancerLifeStyle]

Ахах)

[@MilenaAdelin2207]

😄

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

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

[@FreelancerLifeStyle]

Я рад!

[@al77ex1]

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

[@FreelancerLifeStyle]

Спасибо!

[@Sweet_and_joy]

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

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

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

[@FreelancerLifeStyle]

Пожалуйста!

[@Uncaught_in_promise]

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

[@winsol5103]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@dimasavchenko9150]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@evgeniysalabaykin7201]

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

[@FreelancerLifeStyle]

Пожалуйста!

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

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

[@FreelancerLifeStyle]

Спасибо!

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

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

[@FreelancerLifeStyle]

Пожалуйста!

[@jiza2377]

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

[@FreelancerLifeStyle]

Я рад)

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

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

[@FreelancerLifeStyle]

Пожалуйста!

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

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

[@subaruforester8332]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@kirillv4205]

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

[@Mani_Fast]

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

[@FreelancerLifeStyle]

Спасибо!!

[@alexkam8934]

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

[@FreelancerLifeStyle]

Спасибо!

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

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

[@FreelancerLifeStyle]

Спасибо!

[@user-expert_2023]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@gerompauel]

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

[@123arwel]

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

[@FreelancerLifeStyle]

Спасибо!

[@ilya2839]

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

[@Ferisol]

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

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

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

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

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

[@konstantino7016]

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

[@FreelancerLifeStyle]

Пожалуйста!

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

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

[@soya-untara.9434]

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

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

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

[@FreelancerLifeStyle]

Пожалуйста!

[@Mani_Fast]

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

[@FreelancerLifeStyle]

Спасибо!

[@anatolygalkin1323]

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

[@FreelancerLifeStyle]

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

[@vollex_frontend]

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

[@YarkiiYa]

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

[@FreelancerLifeStyle]

Спасибо!

[@stra1f595]

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

[@MaximVernigorov]

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

[@const-shish]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@veaceslavbalanetchi8347]

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

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

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

[@AlinaDotsenko-d6q]

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

[@MilenaAdelin2207]

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

[@FreelancerLifeStyle]

Будь ласка

[@ilyaprotsenko1023]

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

[@kotlancer]

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

[@energiekost]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@antonshcherban2100]

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

[@ye5275]

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

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

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

[@FreelancerLifeStyle]

Спасибо!

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

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

[@FreelancerLifeStyle]

Пожалуйста!

[@DogSayWaf]

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

[@FreelancerLifeStyle]

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

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

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

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

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

[@FreelancerLifeStyle]

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

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

@@FreelancerLifeStyle верно)

[@vadym7023]

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

[@FreelancerLifeStyle]

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

[@zizzxiii2714]

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

[@FreelancerLifeStyle]

Спасибо!

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

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

[@brodyagaPATY]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@eduardoaslanyan1168]

Жень, подскажи, пожалуйста, шрифт, что используется в макете, на котором объяснял в начале видео, где написано "Shedule a Call with Our Specialist"

[@redsm0ke19]

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

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

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

[@battalov_u]

Подскажите пожалуйста, если использовать в этом случае bootstrap, то будет ли легче реализовать эту задачу? будет ли проще?

[@volodyanalamaf9188]

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

[@FreelancerLifeStyle]

Спасибо!

[@jangow5716]

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

[@leonardrutto8381]

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

[@xenokskings2201]

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

[@i_am_Kamil]

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

[@shake4970]

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

[@tochcha2971]

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

[@PavelM01]

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

[@Olga-gb8vz]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@KindCat21]

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

[@FreelancerLifeStyle]

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

[@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);

[@yuriy2109]

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

[@popovvv]

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

[@mirzomuminsobirjonov1104]

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

[@FreelancerLifeStyle]

Будет!

[@dimadiv6583]

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

[@ytachkadak7599]

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

[@FreelancerLifeStyle]

Спасибо!

[@tommyhellerhound]

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

[@FreelancerLifeStyle]

Пожалуйста!

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

ЖЕК, привіт. А це та сама техні, що ти використовував для макета сайта велосипеда в відео про "адаптив, бутстрап більше не треба"?

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

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

[@FreelancerLifeStyle]

Медиа

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

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

[@pestovavalentina1258]

Супер! В IE не работает (windows 7). Может для него надо фоном встраивать или как?

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

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

[@IT_psychopath]

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

[@FreelancerLifeStyle]

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

[@maksimlegit5264]

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

[@evgeniyprowork]

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

[@gfmusic8117]

Евгений, на 9:29 вы использовали сниппет для position : absolute, и у вас всё выстроилось в ряд. Затем вы каким то магическим образом все элементы раскидали по строчкам. Подскажите пожалуйста, как вы их раскидали

[@Volodya-KA]

Посмотри другое видит про как он снимает делает

[@FreelancerLifeStyle]

Мой редактор (VS Code) сам форматирует при сохранении. Вот настройка kzbin.info/www/bejne/pKmmfYuDd9Fnm5Y

[@niceman5890]

Спасибо

[@mykolahaliuk254]

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

[@FreelancerLifeStyle]

Дякую!

[@modusvivaldi7701]

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

[@vitaliy_vasylykiv]

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

[@andrijkotscherga1705]

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

[@meidro_]

Приветствую. Скажите пожалуйста что за музыка играет в начале?

[@useryoutube132]

Жень, а как ты сделал курсор "зеркальным"? Скачал на каком-то сайте? Ответь пожалуйста, очень понравилось.

[@FreelancerLifeStyle]

Да, для левши, можно загуглить

[@useryoutube132]

@@FreelancerLifeStyle Благодарю!

[@letsgo3184]

Жека, здорова. Ты когда планируешь снимать новый марафон по верстке?

[@FreelancerLifeStyle]

Скоро, но сачала разбор работ еще проведу

[@timurkhudiyev]

А значение padding-top в процентах вычисляется относительно чего? Не будет ли такого, если добавить вниз еще контента, то картинка станет на много больше?

[@FreelancerLifeStyle]

Относительно ширины экрана

[@timurkhudiyev]

@@FreelancerLifeStyle, Спасибо

[@dmytro_b4]

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

[@BohdanVR666]

У меня вопрос: значение px привязано к размерам пикселей на мониторе? Тоесть если я просмотрю одинаковые элементы на сайте на, например, HD и FullHD мониторе, то позиции элементов будут различаться?

[@valentine.samoylov]

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

[@FreelancerLifeStyle]

Супер!

[@bestlife9681]

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

[@FreelancerLifeStyle]

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

[@bestlife9681]

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

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

О контент)

[@FreelancerLifeStyle]

Ага)

[@azharkiosse4132]

Крутое видео! Можешь подсказать как сделать если изображение слева?

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

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

[@thevalkk5301]

Очень качественный контент, продолжай в том же духе!!! Какой программой для макетов ты пользуешься ?

[@FreelancerLifeStyle]

Спасибо! Вот kzbin.info/www/bejne/g6CbnmuJjMRrfpI

[@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%..

[@АлександрГрадинар-ф7б]

Cупер! Как раз недавно завался этим вопросом Подскажи, какую комбинацию используешь для перевода с одной строчки в столбик 09:27?

[@FreelancerLifeStyle]

Мой редактор (VS Code) сам форматирует при сохранении. Вот настройка kzbin.info/www/bejne/pKmmfYuDd9Fnm5Y