Адаптив сайта. Адаптирую многостраничный сайт, сверстаный с GULP, SCSS, БЭМ, GRID

Друзья, в данном видео мы адаптируем наш сайт под все устройства, а потом сможем кайфовать и смотреть его отображение на мобиле)
Первая часть (верстка макета) - • Верстка сайта. Верстаю...
Тема в VSC - плагин Material Theme
Ссылка на телеграм канал:
t.me/from0to1ru​​
Ссылка на телеграм канал с впн:
teleg.one/from0to1ru​​​
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
Вк канала:
bit.ly/vk-from-0-to-1​​
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@den4ik114]

Судя по соотношению просмотров на видео по вёрстке и адаптиву, люди не любят адаптировать сайты.) Спасибо за проделанную огромную работу!

[@centwor1on167]

Или же не у каждого возникают проблемы с адаптивом :)

[@kubris.developer]

Меня прикалывает не сама верстка, а ньюансы, которые Вадос раскрывает в процессе. Получается зачетная вечеринка! :-))

[@ArtemNi]

Вадим, огромное Вам спасибо! Очень приятно с Вами иметь дело и учиться и развиваться! Лучшие вечеринки у Вас клубе!) Держитесь и берегите себя!!! Здоровья, терпения, Мира!!!!!

[@karinadnepr]

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

[@user-ll6yy2lz6k]

Большое спасибо! Лучший учитель по верстке на ютубе)

[@1Cheburash]

Благодарю вас за эти прекрасные видео :) Ваша подача просто супер!

[@mrdanbis7824]

Не смотрел ещё, но знаю, что огонь! Ты красавчик, бро! Спасибо! Закончу с прошлым видосом и приступлю за это!

[@alexkodding9354]

Залител видос. Смотрю описание, мысли в голове" друг дай я тебя обниму " 👍👍👍 спасибо

[@user-um5vx4ez1p]

Ух, это было увлекательно! Закончил просмотр и параллельную верстку этого макета... В общем: мне понравилось такая вечеринка, даёшь исчё и спасибо за твой труд!

[@vadymprokopchuk]

круто!

[@NeedForHeavyMetal]

Владос, респект за уроки! от себя: хотелось бы видеть на примере исходники(где-то то там, то здесь ошибки искать) здоровья тебе и близким, отдуши, жги)

[@WhiteBear141981]

Красавчик! Огромный труд проделал. Спасибо большое!

[@vladimirbelokur602]

Супер. Владос как всегда лучший.

[@olegger7436]

фух осилил, большое Спасибище за эти уроки, практически 15 часов топового обучения)

[@user-ls8xg2ve9v]

Очень круто! Спасибо за труды👍

[@FaYrUsinc]

Спасибо, посмотрел и поверстал на одном дыхании. Отдохни, наберись сил и давай его на WP посадим - завершим эти эпичную трилогию!

[@sergeysokolov4270]

Урра я ждал этот видосик!

[@user-kc8ft5tz8l]

Спасибо тебе, О ВЕЛИКИЙ МАСТЕР ВЁРСТКИ! :-) Вот чуть ли не физически ощущаю, что эти два видоса по многостраничнику сделали меня на голову выше меня прежнего! Горжусь собой и чувствую свою мощу! :-) И да - ты прав 3:43:35 :-))))

[@lemonjuice938]

Вадос красава!) очень много у тебя научился) спасибо что нет рекламы)))) давай посадку!!!) а я на вечеринку)))))

[@bashergurtama8332]

подача шикарная )) жирный лойс

[@grigoriyfomenko4927]

Спасибо за видео. Очень полезное. Есть чему поучиться

[@peiiiajikuh]

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

[@1Cheburash]

А кто еще в вашем топ-3?

[@Camonoto]

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

[@oleksandrpoliichuk9603]

Лайк авансом за роботу! Гляну пізніше!

[@user-dx3ii1kn8r]

Спасибо братское сердце!

[@felixboy85]

Top content. Спасибо тебе чувак!!!

[@user-kc8ft5tz8l]

Какой же ты ЗДРАВО-ЛОГИЧНЫЙ и ЗДРАВО-ЭТИЧНЫЙ!!! Начиная с 19:05 и до 23-20 "Чтобы никого не пугало, не бомбило.. Лично для себя - ни для браузера, ни для кого-то.. Абсолютно по барабану, как оно будет написано!.. Главное - не напортачить!.. Вот в чём соль.. Делал бы свой собственный проект, я б фигачил вот так!.. Но поскольку на Ютьюбе я люблю длинные ролики - поэтому я буду здесь делать вот так!" Да, с тобой мои МОЗГИ НЕ ЗАРЖАВЕЮТ! Вадос, если бы я был 70-летним, я б рекомендовал тебя своим кентам в качестве ЛЕКАРСТВА от МАРАЗМА! :-)

[@vladimirpuzey713]

Это было эпичность! 👍

[@historypolikchannel324]

Спасибо большое! Очень круто было. Скажи пожалуйста будет ли натяжка данной верстки на Wordpress как ты говорил или нет? Хочется знать стоит ли ждать.)))) Заранее спасибо за ответ.

[@Jazzzzby]

Пушка, лайк

[@user-ur2yf6sp1e]

Спасибо)

[@user-yb7ul5jm3v]

посмотрел комментарии и вижу никто не обратил внимание на баг с правым выезжающим меню на маленьких экранах. Если зайти с телефона то будет возможность скролить в бок в пустую область. Для тех кто хочет пофиксить этот баг то просто уберите блок с правым меню на маленьких экранах.

[@user-wp8ky5dz4e]

Да ты крут братан очень прокачал!!!!!!!

[@dianadostiyeva4711]

супер, очень полезно!!!

[@evgeniys3473]

Спасибо за труд , если не трудно то залей на гит хаб ) У меня миллион ошибок хочу по исправлять .

[@anton-vr5xw]

Еее 🔥🔥🔥

[@OskarPrice]

ну как здесь не оставить коментарий для продвижения контента)

[@user-rk4wi2py5p]

всем доброго дня!

[@alexkodding9354]

👍🙋

[@user-xd4mv4mk4c]

в блоке how it works забыли диван поставить на один уровень с ост. картинками как на макете

[@user-kc8ft5tz8l]

:-) 1:50:02 «Всё, у меня вот есть один, второй и, как бы грубо говоря, третий! Белиссимо! Перфетто! Всё - я знаю, как это решить!» :-))) Все изучаем МАНТРЫ и ЗАКЛИНАНИЯ от Вадоса!!! Верный путь к успеху в вёрстке! :-))))) В этом видео Вадос продемонстрировал вершины своего мастерства! Все, желающие насытиться вдохновением от сэнсэя в полной мере, после просмотра видео слушаем известную мелодию "Полёт кондора"!

[@user-wq9uo4me9i]

Потихоньку приближаемся к wordpress

[@rostyslavkinash5232]

спасибо

[@daurenbeksuleymen6657]

Наконец то закончил

[@aleksandrlushkin4459]

Всё круто! Вопрос нужен ли :hover-эффект на мобильных устройствах?

[@sergeyzatsepin513]

А как ты хочешь реализовать hover на моб. устройствах? По умолчанию, он "застывает" при тапе и убирается при тапе на другом элементе, т.е. либо оставлять так, либо отслеживать на js тап+антап и стилизовать соответственно 'элемент на эти доли секунды.

[@user-mx2vb6yt9w]

Привет. Впервые столкнулся с галпом. Все сделал по твоим видосам, начиная со сборки галпа. Такой вопрос: при использовании этой сборки, как загрузить верстку на гитхаб пейджес? Нужны какие-то особенные навыки? Потому что у меня чет не получается. Спасибо

[@renatas2661]

github подхватывает файлы из папки "docs" (в этом проекте она "app"). Короче я переименовала папку и соответственно все настроики в gulpfile.js и все на гитхаб загрузилось.

[@sergeyzatsepin513]

2:03:55 - ну если делать по-нормальному, то ресайз нужно прослушивать палюбэ. Ты же в курсах, что есть т.н. книжная/альбомная ориентация? Юзер просто переворачивает смарт, и твоя вёрстка к херам ломается.

[@asdasd-hg3uz]

А есть видео натяжки на WP етого сайта?

[@aleksandrkanygin2672]

Спасибо за контент, подскажите как правильно выезжающее меню растянуть на всю ширину, чтобы не было отступов по бокам от контейнера. Сделал width: calc(100% + 30px); margin-left: -15px; margin-right: -15px; Работает, но есть подозрение что не надо так делать. А просто margin-left: -15px; margin-right: -15px; не работает, т.к. width 100% насколько я понимаю

[@-shakirov]

о чувак че-то ты намудрил - повесь просто белый фон элементами after и before у одного укажи right: 0 у другого left 0 и ширина 100% что-то в таком роде. Если не получится спрашивай, могу подзаморочиться ахах. А так Вадим в макете шведская горечь такое делал вроде (7-8 часовой видос на канале верстка сайта полностью до завершения)

[@aleksandrkanygin2672]

@@-shakirov Нормальный варик, спасибо за совет.

[@aleksandrkanygin2672]

@@-shakirov Нормальный варик, все теперь отлично выглядит, спасибо за совет.

[@1Cheburash]

@@aleksandrkanygin2672 Подскажите, пожалуйста, вы задавали after и before у menu__list или у menu--open? Прописывал и первому, и второму, а фон так и не появляется(( Не могу понять что я делаю не так. content ''; прописал.

[@1Cheburash]

@@-shakirov Подскажите, пожалуйста, вы задавали after и before у menu__list или у menu--open? Прописывал и первому, и второму, а фон так и не появляется(( Не могу понять что я делаю не так. content ''; прописал.

[@nMnFunny]

WordPress в студию

[@betsmagazine-7242]

не прижимается у меня что-то футер + когда адаптируешь, как Вадим, без включения моб. режима, т.е. не нажимая иконку телефончика, то прокруток нет, когда нажимаешь - появляются из-за бокового меню как я понимаю, хотя на др. макетах такого вроде бы не было у нас же оферфлоу hidden есть .... убираешь side-menu - всё нормализуется

[@WhiteBear141981]

Та же фигня. Залил проект на Github Pages. Открываю с мобильника: огромная горизонтальная полоса прокрутки... Вам удалось как-то ее побороть?

[@betsmagazine-7242]

@@WhiteBear141981 я ещё адаптив полностью не досмотрел (нахожусь на 2:40:00), думал в процессе Вадим всё же заметит ... если не увидел, то можно попробовать в его сообществе в телеграмме спросить, как остальные, кто верстал, исправили ... т.к. я всё равно буду переделывать этот макет для портфолио, думаю просто убить это боковое меню и всё - когда его убираю, то и горизонтальный и вертикальный скроллы пропадают

[@WhiteBear141981]

@@betsmagazine-7242 тоже подумывал о том, чтобы удалить сайд-меню. Но как-то жаль

[@betsmagazine-7242]

@@WhiteBear141981 ну да, тем более что непонятно от чего там прокрутка, в том же магазине, что Вадим выкладывал на Udemy также боковое меню выезжает и свойства вроде бы такие, но скролла нет .. как всегда будет из-за какой-то пропущенной мелочи)))

[@WhiteBear141981]

@@betsmagazine-7242 спасибо! Будем разбираться

[@Hector_UA]

Добрый день. Подскажите пожалуйста, все было хорошо, все работало а потом бах и 'default' errored after 1.21 s Не могу понять что случилось.

[@Hector_UA]

Извините, разобрался, скобку фигурную пропустил:)

[@user-hm1yp1pp6e]

Вадос, спасибо! Всегда - огонь. Только вот у меня на адативе в процессе уменьшения header постепенно испаряются ссылка(logo) и button. Не просто исчезает, не налазит друг на друга, а потихоньку превращается в точку(0). Первый раз такое вижу, может из ребят кто-нибудь подскажет.

[@UchVuch]

Может размер шрифта не в пикселях задан?

[@webdev7135]

у меня также было. я дополнительно задала ширину.

[@user-uh8js8lw5e]

на 2:40:00 не 10 фото, а 9 осталось, всё же лучше чем 5)

[@-shakirov]

пропиши grid-column: span 1; grid-row: span 1; и будет тебе счастье

[@user-ci6gr2xs5y]

А у вас на телефонах нету горизонтального скролла?

[@8x8x36]

У меня тоже скролл и не могу победить

[@sestik1]

могу подсказать решение, если вдруг не получилось. В global.scss нужно прописать классу .wrapper - position: relative; и overflow-x: hidden; а из body убрать этот оверфлоу

[@sestik1]

@@8x8x36 могу подсказать решение, если вдруг не получилось. В global.scss нужно прописать классу .wrapper - position: relative; и overflow-x: hidden; а из body убрать этот оверфлоу

[@user-ci6gr2xs5y]

@@sestik1 Починил, пасиб за подсказку

[@user-lb2cf3ys8k]

@@sestik1 Спасибо, попробую. Я и в Jquery пытался div удалять, но на хостинге не работает почему-то. А на Live Server удалять.

[@prince_off]

Лучший!

[@PesE-footboll]

lagan

[@user-of1cr8ce2c]

1:54:10

[@masteruvz]

Автор, ты вообще живой?

[@svpas76]

Вот вы все выражаетесь инклюдить миксить и тд разве нельзя сказать подключаем библиотеку и нормальной русской лексикой

[@sestik1]

это такой сленг, браток. У любой профессии есть куча терминов, который обычный обыватель не поймет

[@soko9005]

Может кто-нибудь сможет мне помочь, не могу сделать так, чтобы при нажатии на кнопку header__btn-menu страница не скролилась. Добавил в файл global.scss body.lock { overflow: hidden}, никак не хочет работать. В файл min.js для функции .header__btn-menu вот такое - $("body").toggleClass("lock");

[@ha3apbl4]

на елементе works__path__item--measurements баг