Подскажите, как понять к какому блоку задавать то или иное свойство? Как не запутаться во всех вложенностях? И как понять сколько всего надо добавить элементов div перед самим содержимым?
@@InspireInki Когда не знаю какая вложенность боков надо или тяжело представить последовательность в голове, то просто беру бумагу и начинаю набрасывать варианты )))
Блин! Есть у меня некое предчувствие, что никогда мне в ногу с Жекой не идти! Я еще кучу годноты с прошлого года не изучил, а он тутор за тутором производит и производит! Кто-то может вспомнить, у кого еще такая же бешеная продуктивность, да еще и мега толковая? Вот чтобы не просто языком почесать и показать типа- Смотрите как я умею, а выпустить именно толковый контент, с классной подачей и детальным разбором происходящего в ролике. Спасибо за очередную работу!
Смотрю твой канал с самого начала своего пути в вебе, спасибо тебе за все, что ты делаешь. Ты очень помогаешь начинающим разработчикам, твой опыт и наглядные примеры решения проблем - бесценны. Продолжай в том же духе, твоя аудитория с тобой.
Большое спасибо за такое полезный видеоурок! Ни в одной книжке так не расписано с примерами и подводными камнями! Спасибо огромное за столь проработанный материал! Ещё раз спасибо "Сэнсэй"!
Женя, спасибо за видео! Прям очень спас, вчера весь день на работе просидел с такой проблемой, сегодня за пару часов с твоим видосом сделал. У меня на макете две таких секции, одна со слайдером, другая с интерактивной картой вместо картинки. Проблем не возникло, все работает по твоей схеме адаптивно.
Спасибо за полезное видео! Реально полезное, я как раз делаю сайт и возникли проблемы с таким блоком, в итоге фото сделал как background, и через background-size/background-position менял размеры и тд потом через media подгонял под разные экраны ... итоговым результатом я не остался доволен. Сейчас буду переделывать этот блок по твоему видео! Спасибо!
Тяжелооо... что-то я где-то упустила🤔 в обучающем курсе...Будем разбираться🧐😁 поэтапно💪👍 а разбираться хочу, потому что скопировать может каждый, самое главное - понимать суууть
Ааааааааааа с ума сойти, три дня пыхтел над такой задачей и думал как-же всё таки будет правильно. А оказывает на моем любимом канале решение было, причем через гугл случайно наткнулся. Спасибо тебе огромное за такую важную информацию !
Очень круто!! Спасибо за материал и за возможность решить задачку с переворачиванием картинки и текста, пришлось хорошо разобраться в материале чтобы понять как ее решить. оказалось все очень просто.
Жека привет,лайк тебе.мне как для новичка полезная инфа,зачастую мне не нравилось как вели себя контент и картинка в одной и той же секций(я про свои работы),а тут совсем другой подход,обязательно попробую,спасибо.
html-структуру оставляем такой же; в css для блока .section добавляем flex-direction: row-reverse; для картинки применяем transform: translate(100%, 0px); вместо transform: translate(-100%, 0px); вроде, так получается перевернуть
Ребят у меня проблема возникла при верстке этого урока! на 8:04 Жека ставит на section__content свойство display:flex. Но когда я ставлю у меня контент ставится по середине(то есть, и текст и тайтл ровно по середине страницы, а мне это не нужно) В чем проблема? Кто знает можете объяснить? Заранее спасибо
@@const1525 в случае с картинкой помог пример из комментов: vitya8989.github.io/padding/. А вот если тебе нужно блоку с текстом, фон сделать на всю ширину, а сам текст по контейнеру выравнять, это не поможет.
Привет,очень понравился твой ролик. Контент как всегда на высоте) Хотелось бы подкинуть идею для видео,например,мне интересно посмотреть туториал на эту темы в твоем оформлении: Как сделать прелоадер,каким образом его можно анимировать,подключать и т.д Как по мне очень интересная тема для разбора,буду рад если выйдет ролик с ней. Удачи))
Решение действительно классное, спасибо большое! Есть только один вопрос, данным методом можно ли как то ограничить высоту самой картинки, ведь сейчас она регулируется падингом ? К примеру на макетной ширине все смотрится круто, но когда разрешение экрана по ширине, к примеру, 4000px то картинку расфигачивает по высоте чуть ли не на весь вьюпорт, а текст как был своего размера, так и остался. Я понимаю что можно сделать адаптивный шрифт, что бы он тоже увеличивался пропорционально вьюпорта, но тем не менее, можно как то ограничить картинку по высоте ?
Можно убрать падинг у .section__image и задать нужною высоту для .section__content через свойство min-height. Тогда фотка будет под контент подстраиваться, а не наоборот
Евгений, на 9:29 вы использовали сниппет для position : absolute, и у вас всё выстроилось в ряд. Затем вы каким то магическим образом все элементы раскидали по строчкам. Подскажите пожалуйста, как вы их раскидали
У меня вопрос: значение px привязано к размерам пикселей на мониторе? Тоесть если я просмотрю одинаковые элементы на сайте на, например, HD и FullHD мониторе, то позиции элементов будут различаться?
Круто. Спасибо. Я когда-то мучился с подобными блоками. Я заметил небольшую проблему: при появлении скрола у страницы, блок с картинкой смещается влево на несколько пикселей. Это видно если сравнить этот блок на странице со скролом и без. При 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);
Спасибо за видео. Огонь 🔥. Правда не с первого раза всё получилось. Всё повторил, но пока не установил для section__container свойство width: 100% изображение так и налазило на контент (для 40% и 60%). А в видео всё прекрасно работало и без этого. Так и не понял почему(
Возможно я не прав. Но у меня тот же эффект достигается если про контенту задать flex не 100% а поделить их поровну с картинкой(либо в тех пропорциях которые необходимы). При всём при это не нужны ни transform: translate ни calc ни танцы с бубном))
Месяцев 5 назад первый раз ознакомился с данным видео. А научился делать только сейчас, пришлось на заказе внедрять. Только вот картинка была слева и были некоторые отличия в подходе.
Спасибо! Все повторил. Получилось. До этого пытался использовать Ваши формулы для изменения ширины элементов, где первоначальной единицей измерения (первое значение в формуле рх), пробовал изменить на vw, мне так нужно было. Но формула, не захотела правильно работать. Наверное что-то с взаимодействием единиц измерения. Пока не разобрался, оставил px.
А значение padding-top в процентах вычисляется относительно чего? Не будет ли такого, если добавить вниз еще контента, то картинка станет на много больше?
Видео действительно полезное, спасибо. Я верстал сайт где был похожий блок. Можешь подсказать как сделать такой блок, но изображение слева. Попытался что-то намудрить и не получилось.
Мені здається, що з формулою все набагато простіше. 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рх.
Сталкивались с таким?
🔴 Получить доступ к плюшкам + поддержать канал: 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
Подскажите, как понять к какому блоку задавать то или иное свойство? Как не запутаться во всех вложенностях? И как понять сколько всего надо добавить элементов div перед самим содержимым?
Было бы не плохо добавить не только по классу но и по id определять уникальный элемент) это Я про github.com/FreelancerLifeStyle/dynamic_adapt
Почему-то по формуле изображение всё равно внахлёст. Уже несколько раз переписал. В чём может быть проблема? Даже строчка в строчку по видео.
@@GANGST1ER возможно где то лишний или недостающий "} " , У меня однажды из-за одной лишней скобки пришлось долго помучаться
@@InspireInki Когда не знаю какая вложенность боков надо или тяжело представить последовательность в голове, то просто беру бумагу и начинаю набрасывать варианты )))
Блин! Есть у меня некое предчувствие, что никогда мне в ногу с Жекой не идти!
Я еще кучу годноты с прошлого года не изучил, а он тутор за тутором производит и производит!
Кто-то может вспомнить, у кого еще такая же бешеная продуктивность, да еще и мега толковая?
Вот чтобы не просто языком почесать и показать типа- Смотрите как я умею, а выпустить именно толковый контент, с классной подачей и детальным разбором происходящего в ролике.
Спасибо за очередную работу!
Пожалуйста! Рад что полезно!
Я не понимаю, так мало подписчиков потому что слишком годный и полезный контент?
Это же рай для начинающих (да и не только) верстальщиков
Смотрю твой канал с самого начала своего пути в вебе, спасибо тебе за все, что ты делаешь. Ты очень помогаешь начинающим разработчикам, твой опыт и наглядные примеры решения проблем - бесценны. Продолжай в том же духе, твоя аудитория с тобой.
Спасибо большое!
Большое спасибо за такое полезный видеоурок!
Ни в одной книжке так не расписано с примерами и подводными камнями! Спасибо огромное за столь проработанный материал!
Ещё раз спасибо "Сэнсэй"!
Спасибо!
Ох и заковыристая это всегда была задача. Очень хорошее решение! Посмотрел с большим интересом.
Спасибо!
Мне кажется Евгений для меня стал единственным полезным верстальщиком во всем ру ютубе
Спасибо!
Евген, ты меня каждый день спасаешь! на все вопросы ответы у тебя нахожу! спасибосики огроменные, жму руку!! F
Я рад!
С бубном я уже потанцевал))) Красавчик! И весело и по делу.
Спасибо!
Женя, спасибо за видео! Прям очень спас, вчера весь день на работе просидел с такой проблемой, сегодня за пару часов с твоим видосом сделал. У меня на макете две таких секции, одна со слайдером, другая с интерактивной картой вместо картинки. Проблем не возникло, все работает по твоей схеме адаптивно.
Oчень полезная фишечка по адаптиву!!! Автор красавчек!!!
Спасибо!
Спасибо за полезное видео! Реально полезное, я как раз делаю сайт и возникли проблемы с таким блоком, в итоге фото сделал как background, и через background-size/background-position менял размеры и тд потом через media подгонял под разные экраны ... итоговым результатом я не остался доволен. Сейчас буду переделывать этот блок по твоему видео! Спасибо!
Пожалуйста!
Оо я пару дней назад верстал по макету подобный сайт, я так намучился с этим, сказал дизайнеру что у него беды с башкой, а оказывается это у меня
Ахах)
😄
Тяжелооо... что-то я где-то упустила🤔 в обучающем курсе...Будем разбираться🧐😁 поэтапно💪👍 а разбираться хочу, потому что скопировать может каждый, самое главное - понимать суууть
Мне дико нравится это... "у нас все, казалось бы, классно работает, НО.... " и дальше пошла жара. Люблю такое.
Отличный контент!!! Все примеры вёрстки сохраняю на будущее . Спасибо за всё
Пожалуйста!
Наимощнейше? - КОНЕЧНО! спасибо за твои труды )
Пожалуйста!
Только ночью верстал такой блок)) правда, до адаптива не дошел. Как раз вовремя, спасибо!
Пожалуйста!
Лайк и комментарий. Таких видео должно быть больше.
Согласен меня очень мотивируют видосы
Спасибо!!
Как всегда, шикарно)) Спасибо!
Спасибо!
Спасибо тебе Жека огромное!!! Крепкого тебе здоровья и ручки чтоб не болели... :-)!
Спасибо!
Вот именно это я и искал! Очень круто и огромное спасибо!!!
Пожалуйста!
Самые больные темы верстальщика затрагиваешь, очень круто!
Я рад)
Ааааааааааа с ума сойти, три дня пыхтел над такой задачей и думал как-же всё таки будет правильно. А оказывает на моем любимом канале решение было, причем через гугл случайно наткнулся. Спасибо тебе огромное за такую важную информацию !
3 дня эт ерунда я неделю мучился правда я в этой теме всего 2 недели но всё же так долго решать даже для новичка зазорно и удачи с проектоми.
Женя спасибо за видео.
Пожалуйста!
Очень круто!! Спасибо за материал и за возможность решить задачку с переворачиванием картинки и текста, пришлось хорошо разобраться в материале чтобы понять как ее решить. оказалось все очень просто.
Классные видио продолжай в том же духе МОЛОДЕЦ в будущем я поддержу канал!
Спасибо!
Очень классное решение!
Спасибо Женя!!!
Пожалуйста!
Наконец-то справился :) Спасибо Жека! И людям что в комментариях пишут у кого-то подцепил похожую проблему, у другого её решение :)
Спасибо большое за то что делишься знаниями !!!
Пожалуйста!
Это единственный канал, где я нашел годное решение данного вопроса
Ну що тут скажеш, контент як завжди на висоті по користі , подачі. Дякую 👍
Будь ласка
Женя, красно тобі дякую! Щоб я без тебе робив!
Очень интересно и познавательно! Спасибо Женя за классный урок👍
Пожалуйста!
Жека привет,лайк тебе.мне как для новичка полезная инфа,зачастую мне не нравилось как вели себя контент и картинка в одной и той же секций(я про свои работы),а тут совсем другой подход,обязательно попробую,спасибо.
Ты - гений! Сильно помог с моей проблемой. Спасибо!
Сегодня использовал твоё решение в проекте, всё работает, как часы! Респект, Женя, давай еще! :))
Спасибо, за новый скилл нам)).
Пожалуйста!
Спасибо большое, отличная работа, однозначно в копилку! Я только добавил для .section__container ширину 100%, с малым контентом сжимался контейнер.
Вариации безграничны, главное это надежность
Евгений дай Бог здоровья тебе и твоим близким, многих верстал ты вывел из депрессии )))
Это просто взрыв мозга! Но это то что я искал , спасибо!
Дякую тобі, це надзвичайна інформація, якої я більше ніде не зустрічав, це факт!🫡
Спасибо за мега-крутой и полезный урок! 😎💪
Спасибо! Отправляем тебя в тренды !!!!!!! PUSH
Спасибо!
trend.push("Фрилансер по жизни - IT и фриланс");
Женя, спасибо за видос. А как быть если картинку нужно разместить слева, а контент справа?
блоки местами поменять
@@leonardrutto8381 так не получается почему-то...
@@xenokskings2201 Можно поменять с flex свойством flex-direction
@@i_am_Kamil не работает так
Годнота!) супер, спасибо, Жека 😊👍
Пожалуйста!
Жека, как всегда видос на высоте)))
Если кто-то скажет за вложенность, никого не слушай, они не шарят в его силе)))
Ахах, та пусть говорят что хотят)
@@FreelancerLifeStyle верно)
Как раз такая-же ситуация была. А выход оказался под рукой!)
Просто лучший!!! Срочно открывай свою школу!
Спасибо! Курс попросьбе зрителей планируется на осень
Как же сделать картинку слева, а контент справа? Пожалуйста, помогите
тоже мучаюсь и не могу понять))
Сначала пишешь див с картинкой, а потом див с body. Просто порядок меняй и все
flex-direction: row-reverse
html-структуру оставляем такой же;
в css для блока .section добавляем flex-direction: row-reverse;
для картинки применяем transform: translate(100%, 0px); вместо transform: translate(-100%, 0px);
вроде, так получается перевернуть
Подскажите пожалуйста, если использовать в этом случае bootstrap, то будет ли легче реализовать эту задачу? будет ли проще?
Просто лучший!
норм решение)
а вы чекали кроссбраузерность в Эдже или в десктопном Сафари? (за ИЕ молчу)
ЭДЖ без проблем, ПК сафари под рукой нет (я на винде) но тут ничего такого нет, должно работать)
Ребят у меня проблема возникла при верстке этого урока! на 8:04 Жека ставит на section__content свойство display:flex. Но когда я ставлю у меня контент ставится по середине(то есть, и текст и тайтл ровно по середине страницы, а мне это не нужно) В чем проблема? Кто знает можете объяснить? Заранее спасибо
Никак не могу дойти до решения реализации обратной ситуации (изображение - слева, контент - справа)
Нашел?)
@@const1525 Та же фигня, сейчас пробовать буду)
@@deckards6288 Если получится, отпишись))
@@const1525 в случае с картинкой помог пример из комментов: vitya8989.github.io/padding/. А вот если тебе нужно блоку с текстом, фон сделать на всю ширину, а сам текст по контейнеру выравнять, это не поможет.
Привет,очень понравился твой ролик. Контент как всегда на высоте)
Хотелось бы подкинуть идею для видео,например,мне интересно посмотреть туториал на эту темы в твоем оформлении:
Как сделать прелоадер,каким образом его можно анимировать,подключать и т.д
Как по мне очень интересная тема для разбора,буду рад если выйдет ролик с ней. Удачи))
ЖЕК, привіт. А це та сама техні, що ти використовував для макета сайта велосипеда в відео про "адаптив, бутстрап більше не треба"?
Решение действительно классное, спасибо большое! Есть только один вопрос, данным методом можно ли как то ограничить высоту самой картинки, ведь сейчас она регулируется падингом ? К примеру на макетной ширине все смотрится круто, но когда разрешение экрана по ширине, к примеру, 4000px то картинку расфигачивает по высоте чуть ли не на весь вьюпорт, а текст как был своего размера, так и остался. Я понимаю что можно сделать адаптивный шрифт, что бы он тоже увеличивался пропорционально вьюпорта, но тем не менее, можно как то ограничить картинку по высоте ?
Можно убрать падинг у .section__image и задать нужною высоту для .section__content через свойство min-height. Тогда фотка будет под контент подстраиваться, а не наоборот
Но ведь, если ширина экрана будет большой (больше 1360px), например 4000px, то всё будет выглядеть очень плохо.
Жек,ты используешь бутстрап,или пишешь медиа-запросы?
Медиа
Жекич лучший!
Спасибо!
Жека, спасибо большое!! Ты крут!!! 🔥💪
Пожалуйста!
Огромное спасибо! Просто супер решение!
Жень, подскажи, пожалуйста, шрифт, что используется в макете, на котором объяснял в начале видео, где написано "Shedule a Call with Our Specialist"
Евгений, на 9:29 вы использовали сниппет для position : absolute, и у вас всё выстроилось в ряд. Затем вы каким то магическим образом все элементы раскидали по строчкам. Подскажите пожалуйста, как вы их раскидали
Посмотри другое видит про как он снимает делает
Мой редактор (VS Code) сам форматирует при сохранении.
Вот настройка ua-cam.com/video/nxCLXMBl4e4/v-deo.html
Класс! Чудеса математики ))) Спасибо
СПАСИБО, ЧТО ТЫ ЕСТЬ!
Дуже потрiбна реч!
С первого заказа с фриланса стану патроном
Спасибо!
Одразу лайк і комент!!!
Дякую!
Евгений, благодарю
Пожалуйста!
Жека, как всегда лучший! Спасибо тебе! Но есть вопрос: где взять мотивацию в нынешнее время, чтобы не забросить поприще верстальщика?
Может тут что поможет ua-cam.com/play/PLM6XATa8CAG5tj86KRCFVbPodt5TGQEF9.html
Ты просто чудо!
Спасибо!
Огонь 🔥🔥🔥🔥🔥🔥🔥 спасибо Жека🙏
Пожалуйста!
Как наоборот справа контент, слева картинка?
Очень качественный контент, продолжай в том же духе!!! Какой программой для макетов ты пользуешься ?
Спасибо! Вот ua-cam.com/video/Mo8m8SW_8H0/v-deo.html
А чого коли картинка з правої сторони, конент її виштовхує. А коли з лівої то ні???
Супер! В IE не работает (windows 7). Может для него надо фоном встраивать или как?
Первый лайкос :)
Спасибос!
Приветствую. Скажите пожалуйста что за музыка играет в начале?
Почему-то по формуле изображение всё равно внахлёст. Уже несколько раз переписал.
У меня вопрос: значение px привязано к размерам пикселей на мониторе? Тоесть если я просмотрю одинаковые элементы на сайте на, например, HD и FullHD мониторе, то позиции элементов будут различаться?
Круто. Спасибо. Я когда-то мучился с подобными блоками.
Я заметил небольшую проблему: при появлении скрола у страницы, блок с картинкой смещается влево на несколько пикселей. Это видно если сравнить этот блок на странице со скролом и без. При 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);
лучшие видосы! ты ТОП!
Спасибо!
зубодробительная штучка. спасибо!
Пожалуйста!
Каеф. Привет из Сум!
Спасибо за видео. Огонь 🔥. Правда не с первого раза всё получилось. Всё повторил, но пока не установил для section__container свойство width: 100% изображение так и налазило на контент (для 40% и 60%). А в видео всё прекрасно работало и без этого. Так и не понял почему(
А это сработает со слайдером? Чтобы он выходил за границы
Возможно я не прав. Но у меня тот же эффект достигается если про контенту задать flex не 100% а поделить их поровну с картинкой(либо в тех пропорциях которые необходимы). При всём при это не нужны ни transform: translate ни calc ни танцы с бубном))
У vw есть проблема - она учитывает ширину вертикальной полосы прокрутки
Месяцев 5 назад первый раз ознакомился с данным видео. А научился делать только сейчас, пришлось на заказе внедрять. Только вот картинка была слева и были некоторые отличия в подходе.
Супер!!!
Я наверное так никогда не смогу...(((
А разве не проще сделать для .section_content padding-left: calc((100%-1320px)/2); ?
Попробуй сделать, там не все так просто с процентами, они будут браться уже не от 1320px. В общем сделать то можно, но не одной строчкой.
Спасибо! Все повторил. Получилось.
До этого пытался использовать Ваши формулы для изменения ширины элементов, где первоначальной единицей измерения (первое значение в формуле рх), пробовал изменить на vw, мне так нужно было. Но формула, не захотела правильно работать. Наверное что-то с взаимодействием единиц измерения. Пока не разобрался, оставил px.
Ніфіга не зрозумів, але цікаво і виглядить кльово. Треба пальчиками повторити те що в відео - тоді дійде. )))
Жека, здорова. Ты когда планируешь снимать новый марафон по верстке?
Скоро, но сачала разбор работ еще проведу
Привет Жека, классный видео получился.Спасибо...а будет видео по валидации формы?
Будет!
А значение padding-top в процентах вычисляется относительно чего? Не будет ли такого, если добавить вниз еще контента, то картинка станет на много больше?
Относительно ширины экрана
@@FreelancerLifeStyle, Спасибо
Видео действительно полезное, спасибо. Я верстал сайт где был похожий блок. Можешь подсказать как сделать такой блок, но изображение слева. Попытался что-то намудрить и не получилось.
Мені здається, що з формулою все набагато простіше. 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рх.